/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_f367f3 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_f367f3 {--font-inter: 'Inter', 'Inter Fallback'
}

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6ced06489fd81a3f-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa5f74293546f6d0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/62c97acc3aa63787-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Anton Fallback';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_ec6dc7 {font-family: 'Anton', 'Anton Fallback';font-weight: 400;font-style: normal
}.__variable_ec6dc7 {--font-anton: 'Anton', 'Anton Fallback'
}

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/886030b0b59bc5a7-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/0aa834ed78bf6d07-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/67957d42bae0796d-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/f911b923c6adde36-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/939c4f875ee75fbb-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/bb3ef058b751a6ad-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_3c557b {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_3c557b {--font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/* ===========================================
   🎨 OGG DESIGN SYSTEM - CSS CUSTOM PROPERTIES
   SR 2026 Design Tokens
   =========================================== */

/* ===========================================
   🎨 OGG BRAND COLORS
   =========================================== */

/* Primary Brand Colors */
:root {
  /* Orange (Primary) */
  --ogg-color-brand-orange-50: #fff7ed;
  --ogg-color-brand-orange-100: #ffedd5;
  --ogg-color-brand-orange-200: #fed7aa;
  --ogg-color-brand-orange-300: #fdba74;
  --ogg-color-brand-orange-400: #fb923c;
  --ogg-color-brand-orange-500: #f97316;
  --ogg-color-brand-orange-600: #ff6a2c; /* Primary Brand Orange */
  --ogg-color-brand-orange-700: #e0551e;
  --ogg-color-brand-orange-800: #9a3412;
  --ogg-color-brand-orange-900: #7c2d12;

  /* Ink (Neutral Dark) */
  --ogg-color-brand-ink: #111417;
  --ogg-color-brand-ink-50: #f8fafc;
  --ogg-color-brand-ink-100: #f1f5f9;
  --ogg-color-brand-ink-200: #e2e8f0;
  --ogg-color-brand-ink-300: #cbd5e1;
  --ogg-color-brand-ink-400: #94a3b8;
  --ogg-color-brand-ink-500: #64748b;
  --ogg-color-brand-ink-600: #475569;
  --ogg-color-brand-ink-700: #334155;
  --ogg-color-brand-ink-800: #1e293b;
  --ogg-color-brand-ink-900: #0f172a;

  /* Charcoal (Dark Theme) */
  --ogg-color-brand-charcoal-50: #f8fafc;
  --ogg-color-brand-charcoal-100: #f1f5f9;
  --ogg-color-brand-charcoal-200: #e2e8f0;
  --ogg-color-brand-charcoal-300: #cbd5e1;
  --ogg-color-brand-charcoal-400: #94a3b8;
  --ogg-color-brand-charcoal-500: #64748b;
  --ogg-color-brand-charcoal-600: #475569;
  --ogg-color-brand-charcoal-700: #334155;
  --ogg-color-brand-charcoal-800: #1f2124; /* Primary Charcoal */
  --ogg-color-brand-charcoal-900: #0f172a;

  /* Sand (Light Background) */
  --ogg-color-brand-sand-50: #f5eedf; /* Primary Sand */
  --ogg-color-brand-sand-100: #f0e9d2;
  --ogg-color-brand-sand-200: #e4d4b7;
  --ogg-color-brand-sand-300: #d8bf9c;
  --ogg-color-brand-sand-400: #cca881;
  --ogg-color-brand-sand-500: #c09166;
  --ogg-color-brand-sand-600: #a6734d;
  --ogg-color-brand-sand-700: #8c5d3c;
  --ogg-color-brand-sand-800: #72472b;
  --ogg-color-brand-sand-900: #58311a;

  /* Brush (Accent Gold) */
  --ogg-color-brand-brush: #e4b400; /* Primary Brush */
  --ogg-color-brand-brush-50: #fefce8;
  --ogg-color-brand-brush-100: #fef9c3;
  --ogg-color-brand-brush-200: #fef08a;
  --ogg-color-brand-brush-300: #fde047;
  --ogg-color-brand-brush-400: #facc15;
  --ogg-color-brand-brush-500: #eab308;
  --ogg-color-brand-brush-600: #ca8a04;
  --ogg-color-brand-brush-700: #a16207;
  --ogg-color-brand-brush-800: #854d0e;
  --ogg-color-brand-brush-900: #713f12;
}

/* ===========================================
   🎯 SEMANTIC COLORS (Light Theme)
   =========================================== */

:root {
  /* Success */
  --ogg-color-success-50: #f0fdf4;
  --ogg-color-success-100: #dcfce7;
  --ogg-color-success-200: #bbf7d0;
  --ogg-color-success-300: #86efac;
  --ogg-color-success-400: #4ade80;
  --ogg-color-success-500: #22c55e;
  --ogg-color-success-600: #1f9d55; /* Primary Success */
  --ogg-color-success-700: #15803d;
  --ogg-color-success-800: #166534;
  --ogg-color-success-900: #14532d;

  /* Warning */
  --ogg-color-warning-50: #fffbeb;
  --ogg-color-warning-100: #fef3c7;
  --ogg-color-warning-200: #fde68a;
  --ogg-color-warning-300: #fcd34d;
  --ogg-color-warning-400: #fbbf24;
  --ogg-color-warning-500: #f59e0b;
  --ogg-color-warning-600: #c67800; /* Primary Warning */
  --ogg-color-warning-700: #b45309;
  --ogg-color-warning-800: #92400e;
  --ogg-color-warning-900: #78350f;

  /* Danger/Error */
  --ogg-color-danger-50: #fef2f2;
  --ogg-color-danger-100: #fee2e2;
  --ogg-color-danger-200: #fecaca;
  --ogg-color-danger-300: #fca5a5;
  --ogg-color-danger-400: #f87171;
  --ogg-color-danger-500: #ef4444;
  --ogg-color-danger-600: #d64545; /* Primary Danger */
  --ogg-color-danger-700: #b91c1c;
  --ogg-color-danger-800: #991b1b;
  --ogg-color-danger-900: #7f1d1d;

  /* Info */
  --ogg-color-info-50: #eff6ff;
  --ogg-color-info-100: #dbeafe;
  --ogg-color-info-200: #bfdbfe;
  --ogg-color-info-300: #93c5fd;
  --ogg-color-info-400: #60a5fa;
  --ogg-color-info-500: #3b82f6;
  --ogg-color-info-600: #2d6ae3; /* Primary Info */
  --ogg-color-info-700: #1d4ed8;
  --ogg-color-info-800: #1e40af;
  --ogg-color-info-900: #1e3a8a;

  /* Mint (Success Light) */
  --ogg-color-mint-50: #f0fdf4;
  --ogg-color-mint-100: #dcfce7;
  --ogg-color-mint-200: #bbf7d0;
  --ogg-color-mint-300: #86efac;
  --ogg-color-mint-400: #4ade80;
  --ogg-color-mint-500: #22c55e;
  --ogg-color-mint-600: #c7f1e3; /* Primary Mint */
  --ogg-color-mint-700: #15803d;
  --ogg-color-mint-800: #166534;
  --ogg-color-mint-900: #14532d;
}

/* ===========================================
   ⚫ DARK THEME COLORS
   =========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic Colors for Dark Theme */
    --ogg-color-success-50: #14532d;
    --ogg-color-success-100: #166534;
    --ogg-color-success-200: #15803d;
    --ogg-color-success-300: #16a34a;
    --ogg-color-success-400: #22c55e;
    --ogg-color-success-500: #4ade80;
    --ogg-color-success-600: #86efac;
    --ogg-color-success-700: #bbf7d0;
    --ogg-color-success-800: #dcfce7;
    --ogg-color-success-900: #f0fdf4;

    --ogg-color-warning-50: #78350f;
    --ogg-color-warning-100: #92400e;
    --ogg-color-warning-200: #b45309;
    --ogg-color-warning-300: #d97706;
    --ogg-color-warning-400: #f59e0b;
    --ogg-color-warning-500: #fbbf24;
    --ogg-color-warning-600: #fcd34d;
    --ogg-color-warning-700: #fde68a;
    --ogg-color-warning-800: #fef3c7;
    --ogg-color-warning-900: #fffbeb;

    --ogg-color-danger-50: #7f1d1d;
    --ogg-color-danger-100: #991b1b;
    --ogg-color-danger-200: #b91c1c;
    --ogg-color-danger-300: #dc2626;
    --ogg-color-danger-400: #ef4444;
    --ogg-color-danger-500: #f87171;
    --ogg-color-danger-600: #fca5a5;
    --ogg-color-danger-700: #fecaca;
    --ogg-color-danger-800: #fee2e2;
    --ogg-color-danger-900: #fef2f2;

    --ogg-color-info-50: #1e3a8a;
    --ogg-color-info-100: #1e40af;
    --ogg-color-info-200: #1d4ed8;
    --ogg-color-info-300: #2563eb;
    --ogg-color-info-400: #3b82f6;
    --ogg-color-info-500: #60a5fa;
    --ogg-color-info-600: #93c5fd;
    --ogg-color-info-700: #bfdbfe;
    --ogg-color-info-800: #dbeafe;
    --ogg-color-info-900: #eff6ff;
  }
}

/* ===========================================
   ✏️ TYPOGRAPHY TOKENS
   =========================================== */

:root {
  /* Font Families */
  --ogg-font-family-display:
    'Anton', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ogg-font-family-ui:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ogg-font-family-mono:
    'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Font Sizes (Fluid Typography) */
  --ogg-font-size-display-xl: clamp(2rem, 5vw, 2.5rem);
  --ogg-font-size-h1: clamp(1.5rem, 4vw, 2rem);
  --ogg-font-size-h2: clamp(1.25rem, 3.5vw, 1.5rem);
  --ogg-font-size-h3: clamp(1.125rem, 3vw, 1.25rem);
  --ogg-font-size-body-l: clamp(1rem, 2.5vw, 1.125rem);
  --ogg-font-size-body-m: clamp(0.875rem, 2vw, 1rem);
  --ogg-font-size-body-s: clamp(0.8125rem, 1.8vw, 0.875rem);
  --ogg-font-size-caption: clamp(0.75rem, 1.5vw, 0.75rem);

  /* Line Heights */
  --ogg-line-height-display-xl: clamp(2.25rem, 5.5vw, 2.75rem);
  --ogg-line-height-h1: clamp(1.75rem, 4.5vw, 2.25rem);
  --ogg-line-height-h2: clamp(1.5rem, 4vw, 1.875rem);
  --ogg-line-height-h3: clamp(1.5rem, 3.5vw, 1.75rem);
  --ogg-line-height-body-l: clamp(1.5rem, 3vw, 1.625rem);
  --ogg-line-height-body-m: clamp(1.25rem, 2.5vw, 1.5rem);
  --ogg-line-height-body-s: clamp(1.125rem, 2.2vw, 1.25rem);
  --ogg-line-height-caption: clamp(1rem, 2vw, 1rem);

  /* Letter Spacing */
  --ogg-letter-spacing-display-xl: -0.01em;
  --ogg-letter-spacing-h1: 0;
  --ogg-letter-spacing-h2: 0;
  --ogg-letter-spacing-h3: 0;
  --ogg-letter-spacing-body-l: 0;
  --ogg-letter-spacing-body-m: 0;
  --ogg-letter-spacing-body-s: 0;
  --ogg-letter-spacing-caption: 0.01em;

  /* Font Weights */
  --ogg-font-weight-thin: 100;
  --ogg-font-weight-light: 300;
  --ogg-font-weight-regular: 400;
  --ogg-font-weight-medium: 500;
  --ogg-font-weight-semibold: 600;
  --ogg-font-weight-bold: 700;
  --ogg-font-weight-extrabold: 800;
  --ogg-font-weight-black: 900;
}

/* ===========================================
   📐 SPACING TOKENS (8-pt Scale)
   =========================================== */

:root {
  --ogg-space-1: 0.25rem; /* 4px */
  --ogg-space-2: 0.5rem; /* 8px */
  --ogg-space-3: 0.75rem; /* 12px */
  --ogg-space-4: 1rem; /* 16px */
  --ogg-space-5: 1.25rem; /* 20px */
  --ogg-space-6: 1.5rem; /* 24px */
  --ogg-space-7: 1.75rem; /* 28px */
  --ogg-space-8: 2rem; /* 32px */
  --ogg-space-10: 2.5rem; /* 40px */
  --ogg-space-12: 3rem; /* 48px */
  --ogg-space-16: 4rem; /* 64px */
  --ogg-space-20: 5rem; /* 80px */
  --ogg-space-24: 6rem; /* 96px */
}

/* ===========================================
   📏 SIZE TOKENS
   =========================================== */

:root {
  /* Touch Targets (Minimum 44px) */
  --ogg-size-touch-target: 2.75rem; /* 44px */
  --ogg-size-touch-target-sm: 2.5rem; /* 40px */
  --ogg-size-touch-target-lg: 3rem; /* 48px */

  /* Component Sizes */
  --ogg-size-button-height: var(--ogg-size-touch-target);
  --ogg-size-button-height-sm: 2.25rem; /* 36px */
  --ogg-size-button-height-lg: var(--ogg-size-touch-target-lg);

  --ogg-size-input-height: var(--ogg-size-touch-target);
  --ogg-size-input-height-sm: 2.25rem;
  --ogg-size-input-height-lg: var(--ogg-size-touch-target-lg);

  /* FAB Button (56px) */
  --ogg-size-fab: 3.5rem; /* 56px */
  --ogg-size-fab-sm: 2.75rem; /* 44px */
  --ogg-size-fab-lg: 4rem; /* 64px */

  /* Avatar Sizes */
  --ogg-size-avatar-xs: 1.5rem; /* 24px */
  --ogg-size-avatar-sm: 2rem; /* 32px */
  --ogg-size-avatar-md: 2.5rem; /* 40px */
  --ogg-size-avatar-lg: 3rem; /* 48px */
  --ogg-size-avatar-xl: 4rem; /* 64px */

  /* Border Radius */
  --ogg-radius-none: 0;
  --ogg-radius-sm: 0.25rem; /* 4px */
  --ogg-radius-default: 0.75rem; /* 12px */
  --ogg-radius-md: 1rem; /* 16px */
  --ogg-radius-lg: 1.5rem; /* 24px */
  --ogg-radius-xl: 3rem; /* 48px */
  --ogg-radius-full: 9999px;

  /* Border Width */
  --ogg-border-width-thin: 1px;
  --ogg-border-width-default: 2px;
  --ogg-border-width-thick: 3px;
}

/* ===========================================
   🌑 SHADOW TOKENS (Mobile-Optimized)
   =========================================== */

:root {
  --ogg-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ogg-shadow-e2: 0 2px 8px rgba(0, 0, 0, 0.12);
  --ogg-shadow-e3: 0 6px 24px rgba(0, 0, 0, 0.16);
  --ogg-shadow-e4: 0 12px 48px rgba(0, 0, 0, 0.2);

  /* Mobile-optimized shadows */
  --ogg-shadow-mobile-sm:
    0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --ogg-shadow-mobile-md:
    0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --ogg-shadow-mobile-lg:
    0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

  /* Inner shadows */
  --ogg-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --ogg-shadow-inner-focus: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   🎭 ANIMATION TOKENS
   =========================================== */

:root {
  /* Duration */
  --ogg-duration-fast: 150ms;
  --ogg-duration-normal: 300ms;
  --ogg-duration-slow: 500ms;

  /* Easing Functions */
  --ogg-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ogg-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ogg-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ogg-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);

  /* Z-Index Scale */
  --ogg-z-index-dropdown: 1000;
  --ogg-z-index-sticky: 1020;
  --ogg-z-index-fixed: 1030;
  --ogg-z-index-modal-backdrop: 1040;
  --ogg-z-index-modal: 1050;
  --ogg-z-index-popover: 1060;
  --ogg-z-index-tooltip: 1070;
  --ogg-z-index-toast: 1080;
}

/* ===========================================
   📱 MEDIA QUERY TOKENS
   =========================================== */

:root {
  /* Breakpoints (Mobile-first) */
  --ogg-breakpoint-xs: 320px;
  --ogg-breakpoint-sm: 640px;
  --ogg-breakpoint-md: 768px;
  --ogg-breakpoint-lg: 1024px;
  --ogg-breakpoint-xl: 1280px;
  --ogg-breakpoint-2xl: 1536px;
}

/* ===========================================
   ♿ ACCESSIBILITY TOKENS
   =========================================== */

:root {
  /* Focus styles */
  --ogg-focus-ring-color: var(--ogg-color-brand-orange-600);
  --ogg-focus-ring-width: 2px;
  --ogg-focus-ring-offset: 2px;
  --ogg-focus-ring-style: solid;

  /* Reduced motion */
  --ogg-motion-safe: motion-safe;
  --ogg-motion-reduce: motion-reduce;

  /* High contrast */
  --ogg-contrast-high: (prefers-contrast: high);
}

/* ===========================================
   🎮 GAMIFICATION TOKENS
   =========================================== */

:root {
  /* Score colors */
  --ogg-color-score-excellent: var(--ogg-color-success-600);
  --ogg-color-score-good: var(--ogg-color-success-500);
  --ogg-color-score-average: var(--ogg-color-warning-500);
  --ogg-color-score-poor: var(--ogg-color-danger-500);

  /* Badge colors */
  --ogg-color-badge-gold: var(--ogg-color-brand-brush);
  --ogg-color-badge-silver: var(--ogg-color-neutral-400);
  --ogg-color-badge-bronze: #cd7f32;

  /* Progress bar colors */
  --ogg-color-progress-bg: var(--ogg-color-neutral-200);
  --ogg-color-progress-fill: var(--ogg-color-brand-orange-600);

  /* Animation for achievements */
  --ogg-animation-celebration: bounce 0.6s ease-in-out;
}

/* ===========================================
   🔧 UTILITY CLASSES
   =========================================== */

/* Text utilities */
.ogg-text-display-xl {
  font-family: var(--ogg-font-family-display);
  font-size: var(--ogg-font-size-display-xl);
  line-height: var(--ogg-line-height-display-xl);
  letter-spacing: var(--ogg-letter-spacing-display-xl);
  font-weight: var(--ogg-font-weight-bold);
}
.ogg-text-h1 {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-h1);
  line-height: var(--ogg-line-height-h1);
  letter-spacing: var(--ogg-letter-spacing-h1);
  font-weight: var(--ogg-font-weight-semibold);
}
.ogg-text-h2 {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-h2);
  line-height: var(--ogg-line-height-h2);
  letter-spacing: var(--ogg-letter-spacing-h2);
  font-weight: var(--ogg-font-weight-semibold);
}
.ogg-text-h3 {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-h3);
  line-height: var(--ogg-line-height-h3);
  letter-spacing: var(--ogg-letter-spacing-h3);
  font-weight: var(--ogg-font-weight-medium);
}
.ogg-text-body-l {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-body-l);
  line-height: var(--ogg-line-height-body-l);
  letter-spacing: var(--ogg-letter-spacing-body-l);
  font-weight: var(--ogg-font-weight-regular);
}
.ogg-text-body-m {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-body-m);
  line-height: var(--ogg-line-height-body-m);
  letter-spacing: var(--ogg-letter-spacing-body-m);
  font-weight: var(--ogg-font-weight-regular);
}
.ogg-text-body-s {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-body-s);
  line-height: var(--ogg-line-height-body-s);
  letter-spacing: var(--ogg-letter-spacing-body-s);
  font-weight: var(--ogg-font-weight-regular);
}
.ogg-text-caption {
  font-family: var(--ogg-font-family-ui);
  font-size: var(--ogg-font-size-caption);
  line-height: var(--ogg-line-height-caption);
  letter-spacing: var(--ogg-letter-spacing-caption);
  font-weight: var(--ogg-font-weight-medium);
}

/* Color utilities */
.ogg-text-brand-orange {
  color: var(--ogg-color-brand-orange-600);
}
.ogg-text-gray-900 {
  color: var(--ogg-color-brand-ink);
}
.ogg-text-brand-charcoal {
  color: var(--ogg-color-brand-charcoal-800);
}
.ogg-text-brand-sand {
  color: var(--ogg-color-brand-sand-50);
}
.ogg-text-brand-brush {
  color: var(--ogg-color-brand-brush);
}

.ogg-bg-brand-orange {
  background-color: var(--ogg-color-brand-orange-600);
}
.ogg-bg-brand-ink {
  background-color: var(--ogg-color-brand-ink);
}
.ogg-bg-brand-charcoal {
  background-color: var(--ogg-color-brand-charcoal-800);
}
.ogg-bg-brand-sand {
  background-color: var(--ogg-color-brand-sand-50);
}
.ogg-bg-brand-brush {
  background-color: var(--ogg-color-brand-brush);
}

/* Spacing utilities */
.ogg-space-1 {
  margin: var(--ogg-space-1);
}
.ogg-space-2 {
  margin: var(--ogg-space-2);
}
.ogg-space-3 {
  margin: var(--ogg-space-3);
}
.ogg-space-4 {
  margin: var(--ogg-space-4);
}
.ogg-space-5 {
  margin: var(--ogg-space-5);
}
.ogg-space-6 {
  margin: var(--ogg-space-6);
}
.ogg-space-7 {
  margin: var(--ogg-space-7);
}
.ogg-space-8 {
  margin: var(--ogg-space-8);
}
.ogg-space-10 {
  margin: var(--ogg-space-10);
}
.ogg-space-12 {
  margin: var(--ogg-space-12);
}
.ogg-space-16 {
  margin: var(--ogg-space-16);
}
.ogg-space-20 {
  margin: var(--ogg-space-20);
}
.ogg-space-24 {
  margin: var(--ogg-space-24);
}

/* Shadow utilities */
.ogg-shadow-e1 {
  box-shadow: var(--ogg-shadow-e1);
}
.ogg-shadow-e2 {
  box-shadow: var(--ogg-shadow-e2);
}
.ogg-shadow-e3 {
  box-shadow: var(--ogg-shadow-e3);
}
.ogg-shadow-e4 {
  box-shadow: var(--ogg-shadow-e4);
}
.ogg-shadow-mobile-sm {
  box-shadow: var(--ogg-shadow-mobile-sm);
}
.ogg-shadow-mobile-md {
  box-shadow: var(--ogg-shadow-mobile-md);
}
.ogg-shadow-mobile-lg {
  box-shadow: var(--ogg-shadow-mobile-lg);
}

/* Focus utilities */
.ogg-focus-ring {
  outline: none;
  box-shadow:
    0 0 0 var(--ogg-focus-ring-offset) var(--ogg-focus-ring-color),
    0 0 0 calc(var(--ogg-focus-ring-width) + var(--ogg-focus-ring-offset))
      var(--ogg-focus-ring-color);
}

/* Animation utilities */
.ogg-transition-fast {
  transition-duration: var(--ogg-duration-fast);
  transition-timing-function: var(--ogg-easing-standard);
}
.ogg-transition-normal {
  transition-duration: var(--ogg-duration-normal);
  transition-timing-function: var(--ogg-easing-standard);
}
.ogg-transition-slow {
  transition-duration: var(--ogg-duration-slow);
  transition-timing-function: var(--ogg-easing-standard);
}

/* ===========================================
   📱 MOBILE-SPECIFIC TOKENS
   =========================================== */

@media (max-width: 767px) {
  :root {
    /* Adjust spacing for mobile */
    --ogg-space-4: 0.875rem; /* Slightly smaller on mobile */
    --ogg-space-6: 1.25rem;
    --ogg-space-8: 1.5rem;

    /* Mobile-optimized shadows */
    --ogg-shadow-e1: var(--ogg-shadow-mobile-sm);
    --ogg-shadow-e2: var(--ogg-shadow-mobile-md);
    --ogg-shadow-e3: var(--ogg-shadow-mobile-lg);
  }
}

/* ===========================================
   🖨️ PRINT STYLES
   =========================================== */

@media print {
  :root {
    /* High contrast for print */
    --ogg-color-brand-orange-600: #000000;
    --ogg-color-brand-ink: #000000;
    --ogg-color-brand-charcoal-800: #000000;

    /* Remove shadows for print */
    --ogg-shadow-e1: none;
    --ogg-shadow-e2: none;
    --ogg-shadow-e3: none;
    --ogg-shadow-mobile-sm: none;
    --ogg-shadow-mobile-md: none;
    --ogg-shadow-mobile-lg: none;
  }
}

/* ===========================================
   🎨 THEME OVERRIDES FOR COMPONENTS
   =========================================== */

/* Button theme overrides */
:root {
  --ogg-button-primary-bg: var(--ogg-color-brand-orange-600);
  --ogg-button-primary-hover: var(--ogg-color-brand-orange-700);
  --ogg-button-primary-text: white;

  --ogg-button-secondary-bg: transparent;
  --ogg-button-secondary-border: var(--ogg-color-brand-orange-600);
  --ogg-button-secondary-text: var(--ogg-color-brand-orange-600);
  --ogg-button-secondary-hover: var(--ogg-color-brand-orange-50);
}

/* Input theme overrides */
:root {
  --ogg-input-border: var(--ogg-color-neutral-300);
  --ogg-input-focus: var(--ogg-color-brand-orange-600);
  --ogg-input-error: var(--ogg-color-danger-500);
  --ogg-input-success: var(--ogg-color-success-500);
}

/* Card theme overrides */
:root {
  --ogg-card-bg: white;
  --ogg-card-border: var(--ogg-color-neutral-200);
  --ogg-card-shadow: var(--ogg-shadow-e1);
}

/* Dark theme component overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --ogg-card-bg: var(--ogg-color-brand-charcoal-800);
    --ogg-card-border: var(--ogg-color-brand-charcoal-700);
    --ogg-card-shadow: var(--ogg-shadow-mobile-md);

    --ogg-input-border: var(--ogg-color-brand-charcoal-600);
  }
}