/* ==========================================================================
   OGNER — UTILITIES
   --------------------------------------------------------------------------
   Helper classes for layout, spacing, glass, shadows, scroll, truncation.
   All utilities use design tokens — never hard-coded values.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FLEX / GRID HELPERS
   -------------------------------------------------------------------------- */
.k-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.k-flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.k-flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.k-flex-col { display: flex; flex-direction: column; }
.k-flex-col-center { display: flex; flex-direction: column; align-items: center; }
.k-flex-col-start { display: flex; flex-direction: column; align-items: flex-start; }
.k-flex-col-between { display: flex; flex-direction: column; justify-content: space-between; }
.k-flex-wrap { flex-wrap: wrap; }
.k-flex-gap-xs { gap: var(--space-xs); }
.k-flex-gap-base { gap: var(--space-base); }
.k-flex-gap-sm { gap: var(--space-sm); }
.k-flex-gap-md { gap: var(--space-md); }
.k-flex-gap-lg { gap: var(--space-lg); }
.k-items-start { align-items: flex-start; }
.k-items-end   { align-items: flex-end; }
.k-items-stretch { align-items: stretch; }
.k-justify-around { justify-content: space-around; }
.k-justify-evenly { justify-content: space-evenly; }


/* --------------------------------------------------------------------------
   2. STACK  (vertical rhythm primitive)
   -------------------------------------------------------------------------- */
.k-stack > * + * { margin-top: var(--stack-space, var(--space-md)); }
.k-stack-xs { --stack-space: var(--space-xs); }
.k-stack-base { --stack-space: var(--space-base); }
.k-stack-sm { --stack-space: var(--space-sm); }
.k-stack-md { --stack-space: var(--space-md); }
.k-stack-lg { --stack-space: var(--space-lg); }
.k-stack-xl { --stack-space: var(--space-xl); }

.k-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-base));
  align-items: center;
}


/* --------------------------------------------------------------------------
   3. GRID HELPERS
   -------------------------------------------------------------------------- */
.k-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-gutter));
}
.k-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.k-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.k-gap-0 { gap: 0; }
.k-gap-xs { gap: var(--space-xs); }
.k-gap-base { gap: var(--space-base); }
.k-gap-sm { gap: var(--space-sm); }
.k-gap-md { gap: var(--space-md); }
.k-gap-lg { gap: var(--space-lg); }


/* --------------------------------------------------------------------------
   4. CONTAINER
   -------------------------------------------------------------------------- */
.k-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-margin-mobile);
  max-width: var(--container-xl);
}
@media (min-width: 768px) {
  .k-container { padding-inline: var(--space-margin-desktop); max-width: var(--container-xl); }
}
@media (min-width: 1024px) {
  .k-container { max-width: var(--container-2xl); }
}
.k-container-narrow { max-width: 48rem; }
.k-container-wide   { max-width: 88rem; }
.k-container-prose  { max-width: var(--container-prose); }


/* --------------------------------------------------------------------------
   5. SHADOW HELPERS
   -------------------------------------------------------------------------- */
.k-shadow-none   { box-shadow: none; }
.k-shadow-xs     { box-shadow: var(--shadow-xs); }
.k-shadow-sm     { box-shadow: var(--shadow-sm); }
.k-shadow        { box-shadow: var(--shadow); }
.k-shadow-md     { box-shadow: var(--shadow-md); }
.k-shadow-lg     { box-shadow: var(--shadow-lg); }
.k-shadow-xl     { box-shadow: var(--shadow-xl); }
.k-shadow-2xl    { box-shadow: var(--shadow-2xl); }
.k-shadow-inner  { box-shadow: var(--shadow-inner); }
.k-shadow-tonal-1 { box-shadow: var(--shadow-tonal-1); }
.k-shadow-tonal-2 { box-shadow: var(--shadow-tonal-2); }
.k-shadow-tonal-3 { box-shadow: var(--shadow-tonal-3); }
.k-shadow-tonal-4 { box-shadow: var(--shadow-tonal-4); }
.k-shadow-tonal-5 { box-shadow: var(--shadow-tonal-5); }
.k-shadow-glow-gold { box-shadow: var(--shadow-glow-gold); }

.k-shadow-card   { box-shadow: var(--shadow-xs), 0 1px 2px rgba(0,0,0,0.04); }
.k-shadow-popup  { box-shadow: var(--shadow-lg), 0 0 0 1px var(--outline-variant); }


/* --------------------------------------------------------------------------
   6. BORDER HELPERS
   -------------------------------------------------------------------------- */
.k-border        { border: 1px solid var(--outline-variant); }
.k-border-t      { border-top: 1px solid var(--outline-variant); }
.k-border-b      { border-bottom: 1px solid var(--outline-variant); }
.k-border-l      { border-left: 1px solid var(--outline-variant); }
.k-border-r      { border-right: 1px solid var(--outline-variant); }
.k-border-x      { border-left: 1px solid var(--outline-variant); border-right: 1px solid var(--outline-variant); }
.k-border-y      { border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); }
.k-border-dashed { border-style: dashed; }
.k-border-dotted { border-style: dotted; }
.k-border-default { border-color: var(--outline-variant); }
.k-border-focus  { border-color: var(--outline-focus); }
.k-border-error  { border-color: var(--error); }
.k-border-success { border-color: var(--success); }
.k-border-warning { border-color: var(--warning); }
.k-border-primary { border-color: var(--primary); }
.k-border-secondary { border-color: var(--secondary); }
.k-border-gold    { border-color: var(--kinetic-gold); }
.k-border-0       { border: 0; }
.k-border-2       { border-width: 2px; }
.k-border-4       { border-width: 4px; }


/* --------------------------------------------------------------------------
   7. RADIUS HELPERS
   -------------------------------------------------------------------------- */
.k-rounded-none  { border-radius: 0; }
.k-rounded-sm    { border-radius: var(--radius-sm); }
.k-rounded       { border-radius: var(--radius); }
.k-rounded-md    { border-radius: var(--radius-md); }
.k-rounded-lg    { border-radius: var(--radius-lg); }
.k-rounded-xl    { border-radius: var(--radius-xl); }
.k-rounded-2xl   { border-radius: var(--radius-2xl); }
.k-rounded-3xl   { border-radius: var(--radius-3xl); }
.k-rounded-full  { border-radius: var(--radius-full); }
.k-rounded-t     { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.k-rounded-b     { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.k-rounded-l     { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.k-rounded-r     { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }


/* --------------------------------------------------------------------------
   8. TRUNCATION & TEXT
   -------------------------------------------------------------------------- */
.k-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-truncate-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-text-balance { text-wrap: balance; }
.k-text-pretty  { text-wrap: pretty; }
.k-text-nowrap  { white-space: nowrap; }
.k-break-all    { word-break: break-all; }
.k-break-words  { overflow-wrap: break-word; }
.k-uppercase    { text-transform: uppercase; }
.k-lowercase    { text-transform: lowercase; }
.k-capitalize   { text-transform: capitalize; }
.k-leading-none   { line-height: 1; }
.k-leading-tight  { line-height: 1.25; }
.k-leading-snug   { line-height: 1.375; }
.k-leading-normal { line-height: 1.5; }
.k-leading-relaxed{ line-height: 1.625; }
.k-tracking-tighter { letter-spacing: -0.02em; }
.k-tracking-tight   { letter-spacing: -0.01em; }
.k-tracking-normal  { letter-spacing: 0; }
.k-tracking-wide    { letter-spacing: 0.05em; }
.k-tracking-wider   { letter-spacing: 0.1em; }
.k-tracking-widest  { letter-spacing: 0.2em; }


/* --------------------------------------------------------------------------
   9. SCROLL & OVERFLOW
   -------------------------------------------------------------------------- */
.k-scroll-hidden { scrollbar-width: none; -ms-overflow-style: none; }
.k-scroll-hidden::-webkit-scrollbar { display: none; }
.k-scroll-thin   { scrollbar-width: thin; }
.k-scroll-auto   { scrollbar-width: auto; overflow: auto; }
.k-scroll-smooth { scroll-behavior: smooth; }
.k-overflow-auto     { overflow: auto; }
.k-overflow-hidden   { overflow: hidden; }
.k-overflow-x-auto   { overflow-x: auto; overflow-y: hidden; }
.k-overflow-y-auto   { overflow-y: auto; overflow-x: hidden; }
.k-overflow-x-hidden { overflow-x: hidden; }
.k-overflow-y-hidden { overflow-y: hidden; }
.k-overflow-scroll   { overflow: scroll; }
.k-overscroll-none   { overscroll-behavior: none; }
.k-overscroll-contain { overscroll-behavior: contain; }
.k-touch-pan-y       { touch-action: pan-y; }
.k-touch-pan-x       { touch-action: pan-x; }
.k-touch-pan-zoom    { touch-action: pan-x pan-y; }
.k-touch-manipulation { touch-action: manipulation; }
.k-touch-none        { touch-action: none; }


/* --------------------------------------------------------------------------
   10. GLASS / FROSTED
   -------------------------------------------------------------------------- */
.k-glass {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(196, 198, 207, 0.30);
}
.k-glass-strong {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(196, 198, 207, 0.40);
}
.k-glass-dark {
  background: rgba(26, 28, 31, 0.50);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(196, 198, 207, 0.10);
  color: var(--inverse-on-surface);
}
.k-glass-light {
  background: rgba(249, 249, 254, 0.65);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(196, 198, 207, 0.30);
}


/* --------------------------------------------------------------------------
   11. SURFACES
   -------------------------------------------------------------------------- */
.k-bg-card        { background-color: var(--surface-container-lowest); }
.k-bg-card-low    { background-color: var(--surface-container-low); }
.k-bg-card-high   { background-color: var(--surface-container-high); }
.k-bg-page        { background-color: var(--background); }
.k-bg-surface     { background-color: var(--surface); }
.k-bg-variant     { background-color: var(--surface-variant); }
.k-bg-tint        { background-color: var(--surface-tint); }
.k-bg-primary     { background-color: var(--primary); color: var(--on-primary); }
.k-bg-secondary   { background-color: var(--secondary); color: var(--on-secondary); }
.k-bg-tertiary    { background-color: var(--tertiary); color: var(--on-tertiary); }
.k-bg-success     { background-color: var(--success); color: var(--on-success); }
.k-bg-warning     { background-color: var(--warning); color: var(--on-warning); }
.k-bg-error       { background-color: var(--error); color: var(--on-error); }
.k-bg-info        { background-color: var(--info); color: var(--on-info); }
.k-bg-gold        { background: var(--gradient-gold); color: #1a1300; }
.k-bg-overlay     { background-color: rgba(26, 28, 31, 0.50); }
.k-bg-overlay-strong { background-color: rgba(26, 28, 31, 0.75); }
.k-bg-transparent { background-color: transparent; }

.k-bg-primary-10   { background-color: rgba(0, 6, 24, 0.10); }
.k-bg-primary-20   { background-color: rgba(0, 6, 24, 0.20); }
.k-bg-secondary-10 { background-color: rgba(0, 97, 166, 0.10); }
.k-bg-secondary-20 { background-color: rgba(0, 97, 166, 0.20); }
.k-bg-success-10   { background-color: rgba(10, 124, 47, 0.10); }
.k-bg-success-20   { background-color: rgba(10, 124, 47, 0.20); }
.k-bg-warning-10   { background-color: rgba(230, 81, 0, 0.10); }
.k-bg-warning-20   { background-color: rgba(230, 81, 0, 0.20); }
.k-bg-error-10     { background-color: rgba(186, 26, 26, 0.10); }
.k-bg-error-20     { background-color: rgba(186, 26, 26, 0.20); }
.k-bg-info-10      { background-color: rgba(0, 97, 166, 0.10); }
.k-bg-gold-10      { background-color: rgba(253, 173, 1, 0.10); }
.k-bg-gold-20      { background-color: rgba(253, 173, 1, 0.20); }


/* --------------------------------------------------------------------------
   12. TEXT COLOR
   -------------------------------------------------------------------------- */
.k-text-default    { color: var(--on-surface); }
.k-text-muted      { color: var(--on-surface-variant); }
.k-text-disabled   { color: var(--outline); }
.k-text-primary    { color: var(--primary); }
.k-text-secondary  { color: var(--secondary); }
.k-text-success    { color: var(--success); }
.k-text-warning    { color: var(--warning); }
.k-text-error      { color: var(--error); }
.k-text-info       { color: var(--info); }
.k-text-gold       { color: var(--kinetic-gold); }
.k-text-on-primary   { color: var(--on-primary); }
.k-text-on-secondary { color: var(--on-secondary); }
.k-text-on-success   { color: var(--on-success); }
.k-text-on-error     { color: var(--on-error); }
.k-text-inverse      { color: var(--inverse-on-surface); }
.k-text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}


/* --------------------------------------------------------------------------
   13. POSITIONING
   -------------------------------------------------------------------------- */
.k-relative { position: relative; }
.k-absolute { position: absolute; }
.k-fixed    { position: fixed; }
.k-sticky   { position: sticky; }
.k-static   { position: static; }
.k-inset-0  { inset: 0; }
.k-top-0    { top: 0; }
.k-right-0  { right: 0; }
.k-bottom-0 { bottom: 0; }
.k-left-0   { left: 0; }


/* --------------------------------------------------------------------------
   14. SIZING
   -------------------------------------------------------------------------- */
.k-w-full   { width: 100%; }
.k-h-full   { height: 100%; }
.k-w-screen { width: 100vw; }
.k-h-screen { height: 100vh; }
.k-h-screen-dvh { height: 100dvh; }
.k-min-w-tap { min-width: var(--tap-target-min); }
.k-min-h-tap { min-height: var(--tap-target-min); }
.k-min-h-screen { min-height: 100vh; }
.k-min-h-screen-dvh { min-height: 100dvh; }


/* --------------------------------------------------------------------------
   15. CURSOR
   -------------------------------------------------------------------------- */
.k-cursor-pointer     { cursor: pointer; }
.k-cursor-not-allowed { cursor: not-allowed; }
.k-cursor-grab        { cursor: grab; }
.k-cursor-grabbing    { cursor: grab; }
.k-cursor-help        { cursor: help; }
.k-cursor-wait        { cursor: wait; }
.k-cursor-text        { cursor: text; }
.k-cursor-default     { cursor: default; }


/* --------------------------------------------------------------------------
   16. SELECTION / POINTER
   -------------------------------------------------------------------------- */
.k-select-none    { user-select: none; }
.k-select-text    { user-select: text; }
.k-select-all     { user-select: all; }
.k-pointer-none   { pointer-events: none; }
.k-pointer-auto   { pointer-events: auto; }


/* --------------------------------------------------------------------------
   17. TRANSITIONS
   -------------------------------------------------------------------------- */
.k-transition       { transition: all var(--duration-base) var(--ease-default); }
.k-transition-fast  { transition: all var(--duration-fast) var(--ease-default); }
.k-transition-slow  { transition: all var(--duration-slow) var(--ease-default); }
.k-transition-colors { transition: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); }
.k-transition-transform { transition: transform var(--duration-base) var(--ease-emphasized); }
.k-transition-opacity { transition: opacity var(--duration-base) var(--ease-default); }
.k-transition-shadow { transition: box-shadow var(--duration-base) var(--ease-default); }


/* --------------------------------------------------------------------------
   18. ASPECT RATIO
   -------------------------------------------------------------------------- */
.k-aspect-square     { aspect-ratio: 1 / 1; }
.k-aspect-video      { aspect-ratio: 16 / 9; }
.k-aspect-portrait   { aspect-ratio: 3 / 4; }
.k-aspect-landscape  { aspect-ratio: 4 / 3; }
.k-aspect-ultrawide  { aspect-ratio: 21 / 9; }
.k-aspect-card       { aspect-ratio: 3 / 4; }


/* --------------------------------------------------------------------------
   19. CARD HOVER
   -------------------------------------------------------------------------- */
.k-card-hover {
  transition: transform var(--duration-base) var(--ease-emphasized),
              box-shadow var(--duration-base) var(--ease-default);
}
.k-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-tonal-3);
}


/* --------------------------------------------------------------------------
   20. Z-INDEX
   -------------------------------------------------------------------------- */
.k-z-base    { z-index: var(--z-base); }
.k-z-dropdown { z-index: var(--z-dropdown); }
.k-z-sticky  { z-index: var(--z-sticky); }
.k-z-fixed   { z-index: var(--z-fixed); }
.k-z-sidebar { z-index: var(--z-sidebar); }
.k-z-header  { z-index: var(--z-header); }
.k-z-overlay { z-index: var(--z-overlay); }
.k-z-modal   { z-index: var(--z-modal); }
.k-z-popover { z-index: var(--z-popover); }
.k-z-toast   { z-index: var(--z-toast); }
.k-z-tooltip { z-index: var(--z-tooltip); }


/* --------------------------------------------------------------------------
   21. DIVIDER
   -------------------------------------------------------------------------- */
.k-divider {
  height: 1px;
  background: var(--outline-variant);
  border: 0;
  margin: 0;
}
.k-divider-v {
  width: 1px;
  height: 100%;
  background: var(--outline-variant);
  border: 0;
}
.k-divider-strong { background: var(--outline); }


/* --------------------------------------------------------------------------
   22. VISUALLY HIDDEN  (accessible)
   -------------------------------------------------------------------------- */
.k-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.k-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* --------------------------------------------------------------------------
   23. TONE FILTER
   -------------------------------------------------------------------------- */
.k-grayscale   { filter: grayscale(100%); }
.k-invert      { filter: invert(100%); }
.k-sepia       { filter: sepia(100%); }
.k-blur        { filter: blur(4px); }
.k-blur-0      { filter: blur(0); }
.k-brightness-90 { filter: brightness(0.9); }
.k-brightness-110 { filter: brightness(1.1); }
.k-contrast-110 { filter: contrast(1.1); }
.k-saturate-150 { filter: saturate(1.5); }


/* --------------------------------------------------------------------------
   24. GRADIENT TEXT
   -------------------------------------------------------------------------- */
.k-text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.k-text-gradient-gold { background-image: var(--gradient-gold); }
.k-text-gradient-primary { background-image: var(--gradient-primary); }


/* --------------------------------------------------------------------------
   25. RESPONSIVE VISIBILITY
   -------------------------------------------------------------------------- */
.k-hidden { display: none; }
.k-block  { display: block; }
.k-inline-block { display: inline-block; }
.k-flex   { display: flex; }
.k-inline-flex { display: inline-flex; }
.k-grid   { display: grid; }
.k-inline-grid { display: inline-grid; }
.k-table  { display: table; }

@media (min-width: 640px) {
  .sm\:k-block { display: block; }
  .sm\:k-flex  { display: flex; }
  .sm\:k-hidden { display: none; }
}
@media (min-width: 768px) {
  .md\:k-block { display: block; }
  .md\:k-flex  { display: flex; }
  .md\:k-hidden { display: none; }
}
@media (min-width: 1024px) {
  .lg\:k-block { display: block; }
  .lg\:k-flex  { display: flex; }
  .lg\:k-hidden { display: none; }
}
@media (min-width: 1280px) {
  .xl\:k-block { display: block; }
  .xl\:k-flex  { display: flex; }
  .xl\:k-hidden { display: none; }
}