/* ==========================================================================
   GOD'S EYE DESIGN SYSTEM — Design Tokens
   Version: 3.0.0
   Description: Exhaustive CSS custom properties for the God's Eye dark
   futuristic UI system inspired by the Furious 7 God's Eye interface.
   Includes dual-theme support (dark default + light mode) and a semantic
   token layer compatible with shadcn/ui patterns.
   Total tokens: 600+
   ========================================================================== */

:root {

  /* =======================================================================
     0. SEMANTIC TOKEN LAYER (shadcn-compatible)
     Maps high-level intent tokens to concrete God's Eye palette values.
     Usage: var(--ge-background), var(--ge-primary), etc.
     ======================================================================= */

  /* ---- Layout semantics ---- */
  --ge-background: #0a0a0f;
  --ge-foreground: #e8e8f0;
  --ge-card: #14142a;
  --ge-card-foreground: #e8e8f0;
  --ge-popover: #1a1a2e;
  --ge-popover-foreground: #e8e8f0;

  /* ---- Role semantics ---- */
  --ge-primary: #00f0ff;
  --ge-primary-foreground: #0a0a0f;
  --ge-secondary: #7c3aed;
  --ge-secondary-foreground: #ffffff;
  --ge-muted: #1a1a2e;
  --ge-muted-foreground: #8888a0;
  --ge-accent: #ff00aa;
  --ge-accent-foreground: #ffffff;
  --ge-destructive: #ff1744;
  --ge-destructive-foreground: #ffffff;

  /* ---- Chrome semantics ---- */
  --ge-border: rgba(136, 136, 160, 0.15);
  --ge-input: rgba(136, 136, 160, 0.15);
  --ge-ring: rgba(0, 240, 255, 0.50);

  /* ---- HSL-based tokens for alpha manipulation ----
     Usage: hsl(var(--ge-primary-hsl) / 0.5)              */
  --ge-primary-hsl: 187 100% 50%;
  --ge-secondary-hsl: 270 50% 50%;
  --ge-destructive-hsl: 349 100% 55%;
  --ge-accent-hsl: 322 100% 50%;
  --ge-success-hsl: 151 100% 45%;
  --ge-warning-hsl: 40 100% 50%;
  --ge-error-hsl: 349 100% 55%;

  /* ---- Global radius (shadcn-style) ---- */
  --ge-radius: 0.5rem;

  /* =======================================================================
     1. COLOR SYSTEM — Backgrounds
     ======================================================================= */
  --ge-bg-primary: #0a0a0f;
  --ge-bg-primary-rgb: 10, 10, 15;
  --ge-bg-secondary: #111119;
  --ge-bg-secondary-rgb: 17, 17, 25;
  --ge-bg-tertiary: #1a1a2e;
  --ge-bg-tertiary-rgb: 26, 26, 46;
  --ge-bg-elevated: #1e1e32;
  --ge-bg-elevated-rgb: 30, 30, 50;
  --ge-bg-surface: #14142a;
  --ge-bg-surface-rgb: 20, 20, 42;

  /* Overlay backgrounds */
  --ge-bg-overlay: rgba(10, 10, 15, 0.70);
  --ge-bg-overlay-light: rgba(10, 10, 15, 0.40);
  --ge-bg-overlay-medium: rgba(10, 10, 15, 0.60);
  --ge-bg-overlay-heavy: rgba(10, 10, 15, 0.85);
  --ge-bg-overlay-solid: rgba(10, 10, 15, 0.95);
  --ge-bg-scrim: rgba(0, 0, 0, 0.50);
  --ge-bg-scrim-heavy: rgba(0, 0, 0, 0.75);

  /* =======================================================================
     1b. COLOR SYSTEM — Accent: Cyan
     ======================================================================= */
  --ge-cyan: #00f0ff;
  --ge-cyan-rgb: 0, 240, 255;
  --ge-cyan-dim: #009aa6;
  --ge-cyan-bright: #33f5ff;
  --ge-cyan-dark: #006e75;
  --ge-cyan-darker: #004a50;
  --ge-cyan-light: #80f7ff;
  --ge-cyan-alpha-5: rgba(0, 240, 255, 0.05);
  --ge-cyan-alpha-8: rgba(0, 240, 255, 0.08);
  --ge-cyan-alpha-10: rgba(0, 240, 255, 0.10);
  --ge-cyan-alpha-15: rgba(0, 240, 255, 0.15);
  --ge-cyan-alpha-20: rgba(0, 240, 255, 0.20);
  --ge-cyan-alpha-25: rgba(0, 240, 255, 0.25);
  --ge-cyan-alpha-30: rgba(0, 240, 255, 0.30);
  --ge-cyan-alpha-40: rgba(0, 240, 255, 0.40);
  --ge-cyan-alpha-50: rgba(0, 240, 255, 0.50);
  --ge-cyan-alpha-60: rgba(0, 240, 255, 0.60);
  --ge-cyan-alpha-80: rgba(0, 240, 255, 0.80);

  /* Legacy alias */
  --ge-accent-cyan: #00f0ff;
  --ge-accent-cyan-rgb: 0, 240, 255;
  --ge-accent-cyan-dim: #009aa6;
  --ge-accent-cyan-bright: #33f5ff;

  /* =======================================================================
     1c. COLOR SYSTEM — Accent: Magenta
     ======================================================================= */
  --ge-magenta: #ff00aa;
  --ge-magenta-rgb: 255, 0, 170;
  --ge-magenta-dim: #b3006e;
  --ge-magenta-bright: #ff33bb;
  --ge-magenta-dark: #800055;
  --ge-magenta-darker: #4d0033;
  --ge-magenta-light: #ff80d4;
  --ge-magenta-alpha-5: rgba(255, 0, 170, 0.05);
  --ge-magenta-alpha-8: rgba(255, 0, 170, 0.08);
  --ge-magenta-alpha-10: rgba(255, 0, 170, 0.10);
  --ge-magenta-alpha-15: rgba(255, 0, 170, 0.15);
  --ge-magenta-alpha-20: rgba(255, 0, 170, 0.20);
  --ge-magenta-alpha-25: rgba(255, 0, 170, 0.25);
  --ge-magenta-alpha-30: rgba(255, 0, 170, 0.30);
  --ge-magenta-alpha-40: rgba(255, 0, 170, 0.40);
  --ge-magenta-alpha-50: rgba(255, 0, 170, 0.50);
  --ge-magenta-alpha-60: rgba(255, 0, 170, 0.60);
  --ge-magenta-alpha-80: rgba(255, 0, 170, 0.80);

  /* Legacy alias */
  --ge-accent-magenta: #ff00aa;
  --ge-accent-magenta-rgb: 255, 0, 170;
  --ge-accent-magenta-dim: #b3006e;
  --ge-accent-magenta-bright: #ff33bb;

  /* =======================================================================
     1d. COLOR SYSTEM — Accent: Yellow
     ======================================================================= */
  --ge-yellow: #ffe600;
  --ge-yellow-rgb: 255, 230, 0;
  --ge-yellow-dim: #b3a100;
  --ge-yellow-bright: #ffed4d;
  --ge-yellow-dark: #806f00;
  --ge-yellow-darker: #4d4300;
  --ge-yellow-light: #fff280;
  --ge-yellow-alpha-5: rgba(255, 230, 0, 0.05);
  --ge-yellow-alpha-8: rgba(255, 230, 0, 0.08);
  --ge-yellow-alpha-10: rgba(255, 230, 0, 0.10);
  --ge-yellow-alpha-15: rgba(255, 230, 0, 0.15);
  --ge-yellow-alpha-20: rgba(255, 230, 0, 0.20);
  --ge-yellow-alpha-25: rgba(255, 230, 0, 0.25);
  --ge-yellow-alpha-30: rgba(255, 230, 0, 0.30);
  --ge-yellow-alpha-40: rgba(255, 230, 0, 0.40);
  --ge-yellow-alpha-50: rgba(255, 230, 0, 0.50);
  --ge-yellow-alpha-60: rgba(255, 230, 0, 0.60);
  --ge-yellow-alpha-80: rgba(255, 230, 0, 0.80);

  /* Legacy alias */
  --ge-accent-yellow: #ffe600;
  --ge-accent-yellow-rgb: 255, 230, 0;
  --ge-accent-yellow-dim: #b3a100;
  --ge-accent-yellow-bright: #ffed4d;

  /* =======================================================================
     1e. COLOR SYSTEM — Text
     ======================================================================= */
  --ge-text-primary: #e8e8f0;
  --ge-text-primary-rgb: 232, 232, 240;
  --ge-text-secondary: #8888a0;
  --ge-text-secondary-rgb: 136, 136, 160;
  --ge-text-muted: #555570;
  --ge-text-muted-rgb: 85, 85, 112;
  --ge-text-inverse: #0a0a0f;
  --ge-text-inverse-rgb: 10, 10, 15;
  --ge-text-link: #00f0ff;
  --ge-text-link-hover: #33f5ff;
  --ge-text-link-visited: #b080ff;
  --ge-text-disabled: #5a5a72;
  --ge-text-placeholder: #555570;
  --ge-text-on-cyan: #0a0a0f;
  --ge-text-on-magenta: #ffffff;
  --ge-text-on-yellow: #0a0a0f;

  /* =======================================================================
     1f. COLOR SYSTEM — State: Success (Green)
     ======================================================================= */
  --ge-success: #00e676;
  --ge-success-rgb: 0, 230, 118;
  --ge-success-dim: #00a354;
  --ge-success-bright: #33eb91;
  --ge-success-dark: #00773d;
  --ge-success-darker: #004d28;
  --ge-success-light: #80f2ba;
  --ge-success-alpha-10: rgba(0, 230, 118, 0.10);
  --ge-success-alpha-15: rgba(0, 230, 118, 0.15);
  --ge-success-alpha-20: rgba(0, 230, 118, 0.20);
  --ge-success-alpha-30: rgba(0, 230, 118, 0.30);
  --ge-success-alpha-50: rgba(0, 230, 118, 0.50);

  /* Legacy alias */
  --ge-color-success: #00e676;
  --ge-color-success-rgb: 0, 230, 118;

  /* =======================================================================
     1g. COLOR SYSTEM — State: Warning (Amber)
     ======================================================================= */
  --ge-warning: #ffab00;
  --ge-warning-rgb: 255, 171, 0;
  --ge-warning-dim: #b37800;
  --ge-warning-bright: #ffbc33;
  --ge-warning-dark: #805600;
  --ge-warning-darker: #4d3300;
  --ge-warning-light: #ffd580;
  --ge-warning-alpha-10: rgba(255, 171, 0, 0.10);
  --ge-warning-alpha-15: rgba(255, 171, 0, 0.15);
  --ge-warning-alpha-20: rgba(255, 171, 0, 0.20);
  --ge-warning-alpha-30: rgba(255, 171, 0, 0.30);
  --ge-warning-alpha-50: rgba(255, 171, 0, 0.50);

  /* Legacy alias */
  --ge-color-warning: #ffab00;
  --ge-color-warning-rgb: 255, 171, 0;

  /* =======================================================================
     1h. COLOR SYSTEM — State: Error (Red)
     ======================================================================= */
  --ge-error: #ff1744;
  --ge-error-rgb: 255, 23, 68;
  --ge-error-dim: #b31030;
  --ge-error-bright: #ff4569;
  --ge-error-dark: #80000e;
  --ge-error-darker: #4d0009;
  --ge-error-light: #ff8ba1;
  --ge-error-alpha-10: rgba(255, 23, 68, 0.10);
  --ge-error-alpha-15: rgba(255, 23, 68, 0.15);
  --ge-error-alpha-20: rgba(255, 23, 68, 0.20);
  --ge-error-alpha-30: rgba(255, 23, 68, 0.30);
  --ge-error-alpha-50: rgba(255, 23, 68, 0.50);

  /* Legacy alias */
  --ge-color-error: #ff1744;
  --ge-color-error-rgb: 255, 23, 68;

  /* =======================================================================
     1i. COLOR SYSTEM — State: Info (Cyan alias)
     ======================================================================= */
  --ge-info: #00f0ff;
  --ge-info-rgb: 0, 240, 255;
  --ge-info-dim: #009aa6;
  --ge-info-bright: #33f5ff;
  --ge-info-dark: #006e75;
  --ge-info-darker: #004a50;
  --ge-info-light: #80f7ff;
  --ge-info-alpha-10: rgba(0, 240, 255, 0.10);
  --ge-info-alpha-15: rgba(0, 240, 255, 0.15);
  --ge-info-alpha-20: rgba(0, 240, 255, 0.20);
  --ge-info-alpha-30: rgba(0, 240, 255, 0.30);
  --ge-info-alpha-50: rgba(0, 240, 255, 0.50);

  /* Legacy alias */
  --ge-color-info: #00f0ff;
  --ge-color-info-rgb: 0, 240, 255;

  /* =======================================================================
     1j. COLOR SYSTEM — Borders
     ======================================================================= */
  --ge-border-default: rgba(136, 136, 160, 0.15);
  --ge-border-light: rgba(136, 136, 160, 0.10);
  --ge-border-lighter: rgba(136, 136, 160, 0.06);
  --ge-border-dark: rgba(136, 136, 160, 0.25);
  --ge-border-accent: rgba(0, 240, 255, 0.30);
  --ge-border-accent-magenta: rgba(255, 0, 170, 0.30);
  --ge-border-accent-yellow: rgba(255, 230, 0, 0.30);
  --ge-border-success: rgba(0, 230, 118, 0.30);
  --ge-border-warning: rgba(255, 171, 0, 0.30);
  --ge-border-error: rgba(255, 23, 68, 0.30);
  --ge-border-focus: rgba(0, 240, 255, 0.60);

  /* Legacy aliases */
  --ge-border-color: #2a2a40;
  --ge-border-color-light: #3a3a55;
  --ge-border-color-accent: #00f0ff;

  /* =======================================================================
     1k. COLOR SYSTEM — Gradients
     ======================================================================= */
  --ge-gradient-cyan-magenta: linear-gradient(135deg, #00f0ff, #ff00aa);
  --ge-gradient-magenta-cyan: linear-gradient(135deg, #ff00aa, #00f0ff);
  --ge-gradient-cyan-yellow: linear-gradient(135deg, #00f0ff, #ffe600);
  --ge-gradient-magenta-yellow: linear-gradient(135deg, #ff00aa, #ffe600);
  --ge-gradient-warm: linear-gradient(135deg, #ff00aa, #ffe600);
  --ge-gradient-cool: linear-gradient(135deg, #006e75, #00f0ff);
  --ge-gradient-dark: linear-gradient(180deg, #0a0a0f, #1a1a2e);
  --ge-gradient-dark-reverse: linear-gradient(180deg, #1a1a2e, #0a0a0f);
  --ge-gradient-dark-horizontal: linear-gradient(90deg, #0a0a0f, #1a1a2e);
  --ge-gradient-surface: linear-gradient(180deg, #14142a, #1e1e32);
  --ge-gradient-elevated: linear-gradient(180deg, #1e1e32, #14142a);
  --ge-gradient-glass: linear-gradient(180deg, rgba(30, 30, 50, 0.60), rgba(20, 20, 42, 0.30));
  --ge-gradient-glow-cyan: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.15), transparent 70%);
  --ge-gradient-glow-magenta: radial-gradient(ellipse at center, rgba(255, 0, 170, 0.15), transparent 70%);
  --ge-gradient-glow-yellow: radial-gradient(ellipse at center, rgba(255, 230, 0, 0.15), transparent 70%);
  --ge-gradient-mesh: radial-gradient(at 20% 30%, rgba(0, 240, 255, 0.08) 0%, transparent 50%), radial-gradient(at 80% 70%, rgba(255, 0, 170, 0.08) 0%, transparent 50%);
  --ge-gradient-diagonal: linear-gradient(135deg, #111119 0%, #1a1a2e 50%, #1e1e32 100%);
  --ge-gradient-scanline: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.03) 2px, rgba(0, 240, 255, 0.03) 4px);
  --ge-gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.04) 50%, transparent 100%);

  /* =======================================================================
     2. TYPOGRAPHY — Font Families
     ======================================================================= */
  --ge-font-display: 'Syne', 'Inter', system-ui, -apple-system, sans-serif;
  --ge-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ge-font-mono: 'Space Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* =======================================================================
     2b. TYPOGRAPHY — Font Sizes (14 steps)
     ======================================================================= */
  --ge-text-3xs: 0.5rem;        /* 8px */
  --ge-text-2xs: 0.5625rem;     /* 9px */
  --ge-text-xs: 0.625rem;       /* 10px */
  --ge-text-sm: 0.75rem;        /* 12px */
  --ge-text-base: 0.875rem;     /* 14px */
  --ge-text-md: 1rem;           /* 16px */
  --ge-text-lg: 1.125rem;       /* 18px */
  --ge-text-xl: 1.25rem;        /* 20px */
  --ge-text-2xl: 1.5rem;        /* 24px */
  --ge-text-3xl: 2rem;          /* 32px */
  --ge-text-4xl: 2.5rem;        /* 40px */
  --ge-text-5xl: 3rem;          /* 48px */
  --ge-text-6xl: 3.75rem;       /* 60px */
  --ge-text-7xl: 4.5rem;        /* 72px */

  /* =======================================================================
     2c. TYPOGRAPHY — Font Weights (7 steps)
     ======================================================================= */
  --ge-font-thin: 200;
  --ge-font-light: 300;
  --ge-font-normal: 400;
  --ge-font-medium: 500;
  --ge-font-semibold: 600;
  --ge-font-bold: 700;
  --ge-font-extrabold: 800;

  /* Legacy aliases */
  --ge-weight-light: 300;
  --ge-weight-normal: 400;
  --ge-weight-medium: 500;
  --ge-weight-semibold: 600;
  --ge-weight-bold: 700;

  /* =======================================================================
     2d. TYPOGRAPHY — Line Heights (7 steps)
     ======================================================================= */
  --ge-leading-none: 1;
  --ge-leading-tightest: 1.1;
  --ge-leading-tight: 1.2;
  --ge-leading-snug: 1.3;
  --ge-leading-normal: 1.5;
  --ge-leading-relaxed: 1.65;
  --ge-leading-loose: 2;

  /* =======================================================================
     2e. TYPOGRAPHY — Letter Spacings (8 steps)
     ======================================================================= */
  --ge-tracking-tightest: -0.05em;
  --ge-tracking-tight: -0.025em;
  --ge-tracking-normal: 0;
  --ge-tracking-wide: 0.025em;
  --ge-tracking-wider: 0.05em;
  --ge-tracking-widest: 0.1em;
  --ge-tracking-mega: 0.2em;
  --ge-tracking-ultra: 0.3em;

  /* =======================================================================
     3. SPACING — 20-step scale on 4px base
     ======================================================================= */
  --ge-space-0: 0;
  --ge-space-px: 1px;
  --ge-space-0-5: 0.125rem;     /* 2px */
  --ge-space-1: 0.25rem;        /* 4px */
  --ge-space-1-5: 0.375rem;     /* 6px */
  --ge-space-2: 0.5rem;         /* 8px */
  --ge-space-2-5: 0.625rem;     /* 10px */
  --ge-space-3: 0.75rem;        /* 12px */
  --ge-space-4: 1rem;           /* 16px */
  --ge-space-5: 1.25rem;        /* 20px */
  --ge-space-6: 1.5rem;         /* 24px */
  --ge-space-8: 2rem;           /* 32px */
  --ge-space-10: 2.5rem;        /* 40px */
  --ge-space-12: 3rem;          /* 48px */
  --ge-space-16: 4rem;          /* 64px */
  --ge-space-20: 5rem;          /* 80px */
  --ge-space-24: 6rem;          /* 96px */
  --ge-space-32: 8rem;          /* 128px */
  --ge-space-40: 10rem;         /* 160px */
  --ge-space-48: 12rem;         /* 192px */

  /* =======================================================================
     4. SIZING — Widths
     ======================================================================= */
  --ge-width-xs: 17.5rem;       /* 280px */
  --ge-width-sm: 22.5rem;       /* 360px */
  --ge-width-md: 30rem;         /* 480px */
  --ge-width-lg: 40rem;         /* 640px */
  --ge-width-xl: 50rem;         /* 800px */
  --ge-width-2xl: 64rem;        /* 1024px */
  --ge-width-3xl: 75rem;        /* 1200px */
  --ge-width-full: 100%;

  /* Max widths */
  --ge-max-width-xs: 17.5rem;   /* 280px */
  --ge-max-width-sm: 22.5rem;   /* 360px */
  --ge-max-width-md: 30rem;     /* 480px */
  --ge-max-width-lg: 40rem;     /* 640px */
  --ge-max-width-xl: 50rem;     /* 800px */
  --ge-max-width-2xl: 64rem;    /* 1024px */
  --ge-max-width-3xl: 75rem;    /* 1200px */
  --ge-max-width-full: 100%;
  --ge-max-width-prose: 65ch;

  /* Heights */
  --ge-height-screen: 100vh;
  --ge-height-screen-dynamic: 100dvh;
  --ge-height-full: 100%;
  --ge-height-auto: auto;
  --ge-height-min-screen: 100dvh;

  /* =======================================================================
     5. BORDERS — Widths
     ======================================================================= */
  --ge-border-width-none: 0;
  --ge-border-width-thin: 1px;
  --ge-border-width-default: 1px;
  --ge-border-width-medium: 2px;
  --ge-border-width-thick: 3px;
  --ge-border-width-heavy: 4px;

  /* Legacy aliases */
  --ge-border-width: 1px;
  --ge-border-width-thick-legacy: 2px;

  /* =======================================================================
     5b. BORDERS — Radii (9 steps)
     ======================================================================= */
  --ge-radius-none: 0;
  --ge-radius-xs: 0.125rem;     /* 2px */
  --ge-radius-sm: 0.25rem;      /* 4px */
  --ge-radius-md: 0.375rem;     /* 6px */
  --ge-radius-lg: 0.5rem;       /* 8px */
  --ge-radius-xl: 0.75rem;      /* 12px */
  --ge-radius-2xl: 1rem;        /* 16px */
  --ge-radius-3xl: 1.5rem;      /* 24px */
  --ge-radius-full: 9999px;

  /* =======================================================================
     6. SHADOWS — 7 elevation levels
     ======================================================================= */
  --ge-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --ge-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --ge-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --ge-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.40);
  --ge-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.40);
  --ge-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70);
  --ge-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.40);
  --ge-shadow-none: none;

  /* =======================================================================
     6b. SHADOWS — Glow effects: Cyan
     ======================================================================= */
  --ge-glow-cyan-subtle: 0 0 8px rgba(0, 240, 255, 0.15);
  --ge-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.30), 0 0 30px rgba(0, 240, 255, 0.10);
  --ge-glow-cyan-strong: 0 0 20px rgba(0, 240, 255, 0.50), 0 0 40px rgba(0, 240, 255, 0.20), 0 0 60px rgba(0, 240, 255, 0.10);

  /* =======================================================================
     6c. SHADOWS — Glow effects: Magenta
     ======================================================================= */
  --ge-glow-magenta-subtle: 0 0 8px rgba(255, 0, 170, 0.15);
  --ge-glow-magenta: 0 0 15px rgba(255, 0, 170, 0.30), 0 0 30px rgba(255, 0, 170, 0.10);
  --ge-glow-magenta-strong: 0 0 20px rgba(255, 0, 170, 0.50), 0 0 40px rgba(255, 0, 170, 0.20), 0 0 60px rgba(255, 0, 170, 0.10);

  /* =======================================================================
     6d. SHADOWS — Glow effects: Yellow
     ======================================================================= */
  --ge-glow-yellow-subtle: 0 0 8px rgba(255, 230, 0, 0.15);
  --ge-glow-yellow: 0 0 15px rgba(255, 230, 0, 0.30), 0 0 30px rgba(255, 230, 0, 0.10);
  --ge-glow-yellow-strong: 0 0 20px rgba(255, 230, 0, 0.50), 0 0 40px rgba(255, 230, 0, 0.20), 0 0 60px rgba(255, 230, 0, 0.10);

  /* =======================================================================
     6e. SHADOWS — Glow effects: State colors
     ======================================================================= */
  --ge-glow-success-subtle: 0 0 8px rgba(0, 230, 118, 0.15);
  --ge-glow-success: 0 0 15px rgba(0, 230, 118, 0.30), 0 0 30px rgba(0, 230, 118, 0.10);
  --ge-glow-success-strong: 0 0 20px rgba(0, 230, 118, 0.50), 0 0 40px rgba(0, 230, 118, 0.20);
  --ge-glow-warning-subtle: 0 0 8px rgba(255, 171, 0, 0.15);
  --ge-glow-warning: 0 0 15px rgba(255, 171, 0, 0.30), 0 0 30px rgba(255, 171, 0, 0.10);
  --ge-glow-warning-strong: 0 0 20px rgba(255, 171, 0, 0.50), 0 0 40px rgba(255, 171, 0, 0.20);
  --ge-glow-error-subtle: 0 0 8px rgba(255, 23, 68, 0.15);
  --ge-glow-error: 0 0 15px rgba(255, 23, 68, 0.30), 0 0 30px rgba(255, 23, 68, 0.10);
  --ge-glow-error-strong: 0 0 20px rgba(255, 23, 68, 0.50), 0 0 40px rgba(255, 23, 68, 0.20);

  /* =======================================================================
     6f. SHADOWS — Text shadows
     ======================================================================= */
  --ge-text-shadow-default: 0 1px 2px rgba(0, 0, 0, 0.50);
  --ge-text-shadow-cyan: 0 0 10px rgba(0, 240, 255, 0.50), 0 0 20px rgba(0, 240, 255, 0.20);
  --ge-text-shadow-cyan-strong: 0 0 15px rgba(0, 240, 255, 0.70), 0 0 30px rgba(0, 240, 255, 0.30), 0 0 50px rgba(0, 240, 255, 0.10);
  --ge-text-shadow-magenta: 0 0 10px rgba(255, 0, 170, 0.50), 0 0 20px rgba(255, 0, 170, 0.20);
  --ge-text-shadow-magenta-strong: 0 0 15px rgba(255, 0, 170, 0.70), 0 0 30px rgba(255, 0, 170, 0.30), 0 0 50px rgba(255, 0, 170, 0.10);
  --ge-text-shadow-yellow: 0 0 10px rgba(255, 230, 0, 0.50), 0 0 20px rgba(255, 230, 0, 0.20);
  --ge-text-shadow-yellow-strong: 0 0 15px rgba(255, 230, 0, 0.70), 0 0 30px rgba(255, 230, 0, 0.30), 0 0 50px rgba(255, 230, 0, 0.10);
  --ge-text-shadow-glow: 0 0 6px rgba(0, 240, 255, 0.40);

  /* =======================================================================
     7. Z-INDEX — 13 levels
     ======================================================================= */
  --ge-z-deep: -10;
  --ge-z-below: -1;
  --ge-z-base: 0;
  --ge-z-raised: 10;
  --ge-z-dropdown: 100;
  --ge-z-sticky: 200;
  --ge-z-banner: 250;
  --ge-z-overlay: 300;
  --ge-z-modal: 400;
  --ge-z-popover: 500;
  --ge-z-tooltip: 600;
  --ge-z-toast: 700;
  --ge-z-max: 9999;

  /* =======================================================================
     8. ANIMATION — Durations (8 steps)
     ======================================================================= */
  --ge-duration-instant: 50ms;
  --ge-duration-faster: 100ms;
  --ge-duration-fast: 150ms;
  --ge-duration-normal: 200ms;
  --ge-duration-slow: 500ms;
  --ge-duration-slower: 750ms;
  --ge-duration-slowest: 1000ms;
  --ge-duration-glacial: 2000ms;

  /* =======================================================================
     8b. ANIMATION — Easings (8 curves)
     ======================================================================= */
  --ge-ease-linear: linear;
  --ge-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ge-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ge-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ge-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ge-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ge-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ge-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);

  /* =======================================================================
     9. BREAKPOINTS (reference values)
     ======================================================================= */
  --ge-bp-xs: 360px;
  --ge-bp-sm: 480px;
  --ge-bp-md: 768px;
  --ge-bp-lg: 1024px;
  --ge-bp-xl: 1280px;
  --ge-bp-2xl: 1536px;
  --ge-bp-3xl: 1920px;

  /* =======================================================================
     10. CONTAINER MAX WIDTHS
     ======================================================================= */
  --ge-container-sm: 40rem;      /* 640px */
  --ge-container-md: 48rem;      /* 768px */
  --ge-container-lg: 64rem;      /* 1024px */
  --ge-container-xl: 75rem;      /* 1200px */
  --ge-container-2xl: 87.5rem;   /* 1400px */
  --ge-container-3xl: 100rem;    /* 1600px */

  /* =======================================================================
     11a. COMPONENT TOKENS — Buttons
     ======================================================================= */
  /* Button heights */
  --ge-btn-height-xs: 1.75rem;      /* 28px */
  --ge-btn-height-sm: 2rem;         /* 32px */
  --ge-btn-height-md: 2.5rem;       /* 40px */
  --ge-btn-height-lg: 3rem;         /* 48px */
  --ge-btn-height-xl: 3.5rem;       /* 56px */

  /* Button horizontal padding */
  --ge-btn-px-xs: 0.5rem;           /* 8px */
  --ge-btn-px-sm: 0.75rem;          /* 12px */
  --ge-btn-px-md: 1rem;             /* 16px */
  --ge-btn-px-lg: 1.5rem;           /* 24px */
  --ge-btn-px-xl: 2rem;             /* 32px */

  /* Button font sizes */
  --ge-btn-font-xs: 0.625rem;       /* 10px */
  --ge-btn-font-sm: 0.75rem;        /* 12px */
  --ge-btn-font-md: 0.875rem;       /* 14px */
  --ge-btn-font-lg: 1rem;           /* 16px */
  --ge-btn-font-xl: 1.125rem;       /* 18px */

  /* Button border radius */
  --ge-btn-radius: 0.375rem;        /* 6px */
  --ge-btn-radius-sm: 0.25rem;      /* 4px */
  --ge-btn-radius-lg: 0.5rem;       /* 8px */
  --ge-btn-radius-full: 9999px;

  /* Button misc */
  --ge-btn-font-weight: 600;
  --ge-btn-letter-spacing: 0.025em;
  --ge-btn-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ge-btn-focus-ring-width: 2px;
  --ge-btn-focus-ring-offset: 2px;
  --ge-btn-focus-ring-color: rgba(0, 240, 255, 0.50);
  --ge-btn-disabled-opacity: 0.40;
  --ge-btn-icon-gap: 0.5rem;

  /* Legacy aliases */
  --ge-btn-padding-x-sm: 0.75rem;
  --ge-btn-padding-x-md: 1.25rem;
  --ge-btn-padding-x-lg: 1.5rem;

  /* =======================================================================
     11b. COMPONENT TOKENS — Inputs
     ======================================================================= */
  --ge-input-height-sm: 2rem;            /* 32px */
  --ge-input-height-md: 2.5rem;          /* 40px */
  --ge-input-height-lg: 3rem;            /* 48px */
  --ge-input-px: 0.75rem;               /* 12px */
  --ge-input-py: 0.5rem;                /* 8px */
  --ge-input-bg: #111119;
  --ge-input-bg-hover: #14142a;
  --ge-input-bg-focus: #14142a;
  --ge-input-bg-disabled: #0a0a0f;
  --ge-input-border: rgba(136, 136, 160, 0.15);
  --ge-input-border-hover: rgba(136, 136, 160, 0.30);
  --ge-input-border-focus: rgba(0, 240, 255, 0.60);
  --ge-input-border-error: rgba(255, 23, 68, 0.60);
  --ge-input-border-success: rgba(0, 230, 118, 0.60);
  --ge-input-border-width: 1px;
  --ge-input-radius: 0.375rem;           /* 6px */
  --ge-input-font-size: 0.875rem;        /* 14px */
  --ge-input-font-weight: 400;
  --ge-input-color: #e8e8f0;
  --ge-input-placeholder: #555570;
  --ge-input-focus-ring-width: 2px;
  --ge-input-focus-ring-color: rgba(0, 240, 255, 0.25);
  --ge-input-transition: border-color 200ms ease, box-shadow 200ms ease;
  --ge-input-disabled-opacity: 0.40;
  --ge-input-label-font-size: 0.75rem;
  --ge-input-label-font-weight: 500;
  --ge-input-label-color: #8888a0;
  --ge-input-label-spacing: 0.375rem;
  --ge-input-helper-font-size: 0.6875rem;
  --ge-input-helper-color: #555570;

  /* =======================================================================
     11c. COMPONENT TOKENS — Cards
     ======================================================================= */
  --ge-card-bg: #14142a;
  --ge-card-bg-hover: #1a1a2e;
  --ge-card-border: rgba(136, 136, 160, 0.10);
  --ge-card-border-hover: rgba(0, 240, 255, 0.20);
  --ge-card-padding-sm: 0.75rem;         /* 12px */
  --ge-card-padding-md: 1.25rem;         /* 20px */
  --ge-card-padding-lg: 2rem;            /* 32px */
  --ge-card-padding: 1.5rem;             /* 24px default */
  --ge-card-radius: 0.75rem;             /* 12px */
  --ge-card-header-padding: 1rem 1.25rem;
  --ge-card-footer-padding: 0.75rem 1.25rem;
  --ge-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --ge-card-transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
  --ge-card-gap: 1rem;

  /* =======================================================================
     11d. COMPONENT TOKENS — Modals
     ======================================================================= */
  --ge-modal-bg: #1a1a2e;
  --ge-modal-width-sm: 24rem;            /* 384px */
  --ge-modal-width-md: 32rem;            /* 512px */
  --ge-modal-width-lg: 42rem;            /* 672px */
  --ge-modal-width-xl: 56rem;            /* 896px */
  --ge-modal-width: 32rem;               /* default */
  --ge-modal-padding: 1.5rem;
  --ge-modal-padding-header: 1.5rem 1.5rem 1rem;
  --ge-modal-padding-body: 0 1.5rem;
  --ge-modal-padding-footer: 1rem 1.5rem 1.5rem;
  --ge-modal-radius: 0.75rem;            /* 12px */
  --ge-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.70);
  --ge-modal-overlay-bg: rgba(10, 10, 15, 0.75);
  --ge-modal-backdrop-blur: 4px;
  --ge-modal-z: 400;
  --ge-modal-close-size: 2rem;
  --ge-modal-header-gap: 0.75rem;

  /* =======================================================================
     11e. COMPONENT TOKENS — Tooltips
     ======================================================================= */
  --ge-tooltip-bg: #1e1e32;
  --ge-tooltip-color: #e8e8f0;
  --ge-tooltip-padding: 0.375rem 0.625rem;
  --ge-tooltip-radius: 0.25rem;          /* 4px */
  --ge-tooltip-font-size: 0.75rem;       /* 12px */
  --ge-tooltip-font-weight: 400;
  --ge-tooltip-max-width: 18rem;         /* 288px */
  --ge-tooltip-arrow-size: 6px;
  --ge-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);
  --ge-tooltip-z: 600;
  --ge-tooltip-offset: 8px;
  --ge-tooltip-delay: 200ms;

  /* =======================================================================
     11f. COMPONENT TOKENS — Badges
     ======================================================================= */
  --ge-badge-px: 0.5rem;                /* 8px */
  --ge-badge-py: 0.125rem;              /* 2px */
  --ge-badge-font-size: 0.625rem;       /* 10px */
  --ge-badge-font-weight: 600;
  --ge-badge-radius: 9999px;
  --ge-badge-letter-spacing: 0.05em;
  --ge-badge-line-height: 1.4;
  --ge-badge-height: 1.25rem;            /* 20px */
  --ge-badge-dot-size: 0.5rem;           /* 8px */

  /* =======================================================================
     11g. COMPONENT TOKENS — Alerts
     ======================================================================= */
  --ge-alert-padding: 1rem 1.25rem;
  --ge-alert-radius: 0.5rem;            /* 8px */
  --ge-alert-border-width: 1px;
  --ge-alert-font-size: 0.875rem;       /* 14px */
  --ge-alert-icon-size: 1.25rem;        /* 20px */
  --ge-alert-gap: 0.75rem;              /* 12px */
  --ge-alert-title-font-weight: 600;
  --ge-alert-title-font-size: 0.875rem;
  --ge-alert-close-size: 1.5rem;

  /* =======================================================================
     11h. COMPONENT TOKENS — Navbar
     ======================================================================= */
  --ge-navbar-height: 3.5rem;            /* 56px */
  --ge-navbar-height-lg: 4rem;           /* 64px */
  --ge-navbar-padding-x: 1.5rem;         /* 24px */
  --ge-navbar-padding-y: 0;
  --ge-navbar-bg: rgba(10, 10, 15, 0.85);
  --ge-navbar-bg-solid: #0a0a0f;
  --ge-navbar-border: rgba(136, 136, 160, 0.10);
  --ge-navbar-backdrop-blur: 12px;
  --ge-navbar-z: 200;
  --ge-navbar-logo-height: 2rem;         /* 32px */
  --ge-navbar-item-padding: 0.5rem 0.75rem;
  --ge-navbar-item-gap: 0.25rem;

  /* =======================================================================
     11i. COMPONENT TOKENS — Sidebar
     ======================================================================= */
  --ge-sidebar-width: 16rem;             /* 256px */
  --ge-sidebar-width-collapsed: 4rem;    /* 64px */
  --ge-sidebar-width-wide: 20rem;        /* 320px */
  --ge-sidebar-bg: #111119;
  --ge-sidebar-border: rgba(136, 136, 160, 0.10);
  --ge-sidebar-padding: 1rem;
  --ge-sidebar-item-height: 2.5rem;      /* 40px */
  --ge-sidebar-item-padding: 0.5rem 0.75rem;
  --ge-sidebar-item-radius: 0.375rem;    /* 6px */
  --ge-sidebar-item-gap: 0.25rem;        /* 4px */
  --ge-sidebar-item-icon-size: 1.25rem;  /* 20px */
  --ge-sidebar-section-gap: 1.5rem;
  --ge-sidebar-section-label-size: 0.625rem;
  --ge-sidebar-z: 100;
  --ge-sidebar-transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* =======================================================================
     11j. COMPONENT TOKENS — Dropdown
     ======================================================================= */
  --ge-dropdown-min-width: 12rem;        /* 192px */
  --ge-dropdown-max-width: 20rem;        /* 320px */
  --ge-dropdown-max-height: 20rem;       /* 320px */
  --ge-dropdown-bg: #1a1a2e;
  --ge-dropdown-border: rgba(136, 136, 160, 0.15);
  --ge-dropdown-radius: 0.5rem;          /* 8px */
  --ge-dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.50);
  --ge-dropdown-padding: 0.25rem;
  --ge-dropdown-item-height: 2.25rem;    /* 36px */
  --ge-dropdown-item-padding: 0.5rem 0.75rem;
  --ge-dropdown-item-radius: 0.25rem;    /* 4px */
  --ge-dropdown-item-hover-bg: rgba(0, 240, 255, 0.08);
  --ge-dropdown-item-active-bg: rgba(0, 240, 255, 0.15);
  --ge-dropdown-item-font-size: 0.875rem;
  --ge-dropdown-divider: rgba(136, 136, 160, 0.10);
  --ge-dropdown-z: 100;
  --ge-dropdown-offset: 4px;
  --ge-dropdown-group-label-size: 0.6875rem;
  --ge-dropdown-group-label-color: #555570;

  /* =======================================================================
     11k. COMPONENT TOKENS — Toggle / Switch
     ======================================================================= */
  --ge-toggle-width: 2.75rem;            /* 44px */
  --ge-toggle-height: 1.5rem;            /* 24px */
  --ge-toggle-thumb-size: 1.25rem;       /* 20px */
  --ge-toggle-thumb-offset: 2px;
  --ge-toggle-bg-off: #1a1a2e;
  --ge-toggle-bg-on: #00f0ff;
  --ge-toggle-border: rgba(136, 136, 160, 0.25);
  --ge-toggle-thumb-color: #e8e8f0;
  --ge-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  --ge-toggle-radius: 9999px;
  --ge-toggle-transition: background-color 200ms ease, border-color 200ms ease;
  --ge-toggle-disabled-opacity: 0.40;

  /* =======================================================================
     11l. COMPONENT TOKENS — Avatar
     ======================================================================= */
  --ge-avatar-xs: 1.5rem;               /* 24px */
  --ge-avatar-sm: 2rem;                 /* 32px */
  --ge-avatar-md: 2.5rem;               /* 40px */
  --ge-avatar-lg: 3rem;                 /* 48px */
  --ge-avatar-xl: 4rem;                 /* 64px */
  --ge-avatar-2xl: 5rem;                /* 80px */
  --ge-avatar-radius: 9999px;
  --ge-avatar-border-width: 2px;
  --ge-avatar-border-color: rgba(0, 240, 255, 0.30);
  --ge-avatar-bg: #1a1a2e;
  --ge-avatar-font-xs: 0.5rem;          /* 8px */
  --ge-avatar-font-sm: 0.625rem;        /* 10px */
  --ge-avatar-font-md: 0.875rem;        /* 14px */
  --ge-avatar-font-lg: 1.125rem;        /* 18px */
  --ge-avatar-font-xl: 1.5rem;          /* 24px */
  --ge-avatar-font-2xl: 2rem;           /* 32px */
  --ge-avatar-status-size: 0.625rem;    /* 10px */
  --ge-avatar-group-overlap: -0.5rem;

  /* =======================================================================
     11m. COMPONENT TOKENS — Toast / Notification
     ======================================================================= */
  --ge-toast-max-width: 24rem;           /* 384px */
  --ge-toast-min-width: 16rem;           /* 256px */
  --ge-toast-padding: 0.875rem 1rem;
  --ge-toast-gap: 0.75rem;
  --ge-toast-radius: 0.5rem;            /* 8px */
  --ge-toast-bg: #1e1e32;
  --ge-toast-border: rgba(136, 136, 160, 0.15);
  --ge-toast-shadow: 0 10px 25px rgba(0, 0, 0, 0.50);
  --ge-toast-z: 700;
  --ge-toast-stack-gap: 0.5rem;
  --ge-toast-font-size: 0.875rem;
  --ge-toast-title-font-weight: 600;
  --ge-toast-icon-size: 1.25rem;
  --ge-toast-close-size: 1.25rem;
  --ge-toast-duration: 5000ms;
  --ge-toast-animation-in: 300ms;
  --ge-toast-animation-out: 200ms;

  /* =======================================================================
     11n. COMPONENT TOKENS — Progress
     ======================================================================= */
  --ge-progress-height-sm: 0.25rem;      /* 4px */
  --ge-progress-height-md: 0.5rem;       /* 8px */
  --ge-progress-height-lg: 0.75rem;      /* 12px */
  --ge-progress-bg: rgba(136, 136, 160, 0.10);
  --ge-progress-fill: #00f0ff;
  --ge-progress-fill-success: #00e676;
  --ge-progress-fill-warning: #ffab00;
  --ge-progress-fill-error: #ff1744;
  --ge-progress-radius: 9999px;
  --ge-progress-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* =======================================================================
     11o. COMPONENT TOKENS — Tabs
     ======================================================================= */
  --ge-tab-padding: 0.625rem 1rem;
  --ge-tab-border-width: 0;
  --ge-tab-indicator-height: 2px;
  --ge-tab-indicator-color: #00f0ff;
  --ge-tab-font-size: 0.875rem;          /* 14px */
  --ge-tab-font-weight: 500;
  --ge-tab-color: #8888a0;
  --ge-tab-color-active: #e8e8f0;
  --ge-tab-color-hover: #e8e8f0;
  --ge-tab-color-disabled: #44445a;
  --ge-tab-bg-hover: rgba(0, 240, 255, 0.05);
  --ge-tab-bg-active: transparent;
  --ge-tab-gap: 0;
  --ge-tab-radius: 0.25rem 0.25rem 0 0;
  --ge-tab-transition: color 200ms ease, background-color 200ms ease;
  --ge-tab-list-border: rgba(136, 136, 160, 0.10);

  /* =======================================================================
     11p. COMPONENT TOKENS — Accordion
     ======================================================================= */
  --ge-accordion-padding: 1rem 1.25rem;
  --ge-accordion-border: rgba(136, 136, 160, 0.10);
  --ge-accordion-border-width: 1px;
  --ge-accordion-bg: transparent;
  --ge-accordion-bg-hover: rgba(0, 240, 255, 0.03);
  --ge-accordion-header-font-size: 0.875rem;
  --ge-accordion-header-font-weight: 500;
  --ge-accordion-header-color: #e8e8f0;
  --ge-accordion-content-padding: 0 1.25rem 1rem;
  --ge-accordion-content-color: #8888a0;
  --ge-accordion-icon-size: 1.25rem;     /* 20px */
  --ge-accordion-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ge-accordion-gap: 0;

  /* =======================================================================
     11q. COMPONENT TOKENS — Divider
     ======================================================================= */
  --ge-divider-color: rgba(136, 136, 160, 0.10);
  --ge-divider-color-strong: rgba(136, 136, 160, 0.20);
  --ge-divider-color-accent: rgba(0, 240, 255, 0.20);
  --ge-divider-color-magenta: rgba(255, 0, 170, 0.20);
  --ge-divider-thickness: 1px;
  --ge-divider-spacing: 1.5rem;
  --ge-divider-spacing-sm: 0.75rem;
  --ge-divider-spacing-lg: 2rem;

  /* =======================================================================
     11r. COMPONENT TOKENS — Skeleton Loading
     ======================================================================= */
  --ge-skeleton-base: #1a1a2e;
  --ge-skeleton-highlight: #1e1e32;
  --ge-skeleton-radius: 0.25rem;         /* 4px */
  --ge-skeleton-radius-full: 9999px;
  --ge-skeleton-duration: 1.8s;
  --ge-skeleton-delay: 0.1s;

  /* =======================================================================
     11s. COMPONENT TOKENS — Scrollbar
     ======================================================================= */
  --ge-scrollbar-width: 6px;
  --ge-scrollbar-width-hover: 8px;
  --ge-scrollbar-thumb: rgba(136, 136, 160, 0.25);
  --ge-scrollbar-thumb-hover: rgba(136, 136, 160, 0.40);
  --ge-scrollbar-track: transparent;
  --ge-scrollbar-track-bg: rgba(10, 10, 15, 0.50);
  --ge-scrollbar-radius: 9999px;

  /* =======================================================================
     11t. COMPONENT TOKENS — Focus Ring
     ======================================================================= */
  --ge-focus-ring-width: 2px;
  --ge-focus-ring-offset: 2px;
  --ge-focus-ring-color: rgba(0, 240, 255, 0.50);
  --ge-focus-ring-color-error: rgba(255, 23, 68, 0.50);
  --ge-focus-ring-color-success: rgba(0, 230, 118, 0.50);
  --ge-focus-ring-style: solid;

  /* =======================================================================
     11u. COMPONENT TOKENS — Transition Defaults
     ======================================================================= */
  --ge-transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --ge-transition-opacity: opacity 200ms ease;
  --ge-transition-transform: transform 200ms ease;
  --ge-transition-shadow: box-shadow 200ms ease;
  --ge-transition-all: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ge-transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ge-transition-slow: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* =======================================================================
     11v. COMPONENT TOKENS — Table
     ======================================================================= */
  --ge-table-header-bg: rgba(20, 20, 42, 0.80);
  --ge-table-header-color: #8888a0;
  --ge-table-header-font-size: 0.6875rem;
  --ge-table-header-font-weight: 600;
  --ge-table-header-letter-spacing: 0.05em;
  --ge-table-header-padding: 0.75rem 1rem;
  --ge-table-row-bg: transparent;
  --ge-table-row-bg-hover: rgba(0, 240, 255, 0.03);
  --ge-table-row-bg-stripe: rgba(20, 20, 42, 0.30);
  --ge-table-row-bg-selected: rgba(0, 240, 255, 0.08);
  --ge-table-cell-padding: 0.75rem 1rem;
  --ge-table-cell-font-size: 0.875rem;
  --ge-table-border: rgba(136, 136, 160, 0.08);
  --ge-table-radius: 0.5rem;

  /* =======================================================================
     11w. COMPONENT TOKENS — Popover
     ======================================================================= */
  --ge-popover-bg: #1a1a2e;
  --ge-popover-border: rgba(136, 136, 160, 0.15);
  --ge-popover-radius: 0.5rem;
  --ge-popover-shadow: 0 10px 30px rgba(0, 0, 0, 0.50);
  --ge-popover-padding: 1rem;
  --ge-popover-max-width: 20rem;
  --ge-popover-arrow-size: 8px;
  --ge-popover-z: 500;
  --ge-popover-offset: 8px;

  /* =======================================================================
     11x. COMPONENT TOKENS — Chip / Tag
     ======================================================================= */
  --ge-chip-height: 1.5rem;
  --ge-chip-px: 0.5rem;
  --ge-chip-font-size: 0.6875rem;
  --ge-chip-font-weight: 500;
  --ge-chip-radius: 0.25rem;
  --ge-chip-gap: 0.375rem;
  --ge-chip-icon-size: 0.875rem;
  --ge-chip-remove-size: 0.875rem;

  /* =======================================================================
     12. OPACITY SCALE
     ======================================================================= */
  --ge-opacity-0: 0;
  --ge-opacity-5: 0.05;
  --ge-opacity-10: 0.10;
  --ge-opacity-15: 0.15;
  --ge-opacity-20: 0.20;
  --ge-opacity-25: 0.25;
  --ge-opacity-30: 0.30;
  --ge-opacity-40: 0.40;
  --ge-opacity-50: 0.50;
  --ge-opacity-60: 0.60;
  --ge-opacity-70: 0.70;
  --ge-opacity-75: 0.75;
  --ge-opacity-80: 0.80;
  --ge-opacity-90: 0.90;
  --ge-opacity-100: 1;

  /* =======================================================================
     13. BACKDROP BLUR
     ======================================================================= */
  --ge-blur-none: 0;
  --ge-blur-xs: 2px;
  --ge-blur-sm: 4px;
  --ge-blur-md: 8px;
  --ge-blur-lg: 12px;
  --ge-blur-xl: 16px;
  --ge-blur-2xl: 24px;
  --ge-blur-3xl: 40px;

  /* =======================================================================
     14. ASPECT RATIOS
     ======================================================================= */
  --ge-aspect-square: 1 / 1;
  --ge-aspect-video: 16 / 9;
  --ge-aspect-photo: 4 / 3;
  --ge-aspect-portrait: 3 / 4;
  --ge-aspect-wide: 21 / 9;
  --ge-aspect-golden: 1.618 / 1;

  /* =======================================================================
     15. ICON SIZES
     ======================================================================= */
  --ge-icon-2xs: 0.625rem;      /* 10px */
  --ge-icon-xs: 0.75rem;        /* 12px */
  --ge-icon-sm: 1rem;           /* 16px */
  --ge-icon-md: 1.25rem;        /* 20px */
  --ge-icon-lg: 1.5rem;         /* 24px */
  --ge-icon-xl: 2rem;           /* 32px */
  --ge-icon-2xl: 2.5rem;        /* 40px */
  --ge-icon-3xl: 3rem;          /* 48px */

  /* =======================================================================
     16. GRID SYSTEM
     ======================================================================= */
  --ge-grid-columns: 12;
  --ge-grid-gutter: 1.5rem;
  --ge-grid-gutter-sm: 1rem;
  --ge-grid-gutter-lg: 2rem;
  --ge-grid-margin: 1rem;
  --ge-grid-margin-md: 1.5rem;
  --ge-grid-margin-lg: 2rem;

  /* =======================================================================
     17. SELECTION COLORS
     ======================================================================= */
  --ge-selection-bg: rgba(0, 240, 255, 0.25);
  --ge-selection-color: #e8e8f0;

  /* =======================================================================
     18. PRINT OVERRIDES (reference)
     ======================================================================= */
  --ge-print-text: #000000;
  --ge-print-bg: #ffffff;
  --ge-print-border: #cccccc;
}


/* ==========================================================================
   EXPLICIT DARK THEME — mirrors :root for programmatic data-theme toggling
   ========================================================================== */

[data-theme="dark"] {

  /* ---- Semantic layer (dark) ---- */
  --ge-background: #0a0a0f;
  --ge-foreground: #e8e8f0;
  --ge-card: #14142a;
  --ge-card-foreground: #e8e8f0;
  --ge-popover: #1a1a2e;
  --ge-popover-foreground: #e8e8f0;

  --ge-primary: #00f0ff;
  --ge-primary-foreground: #0a0a0f;
  --ge-secondary: #7c3aed;
  --ge-secondary-foreground: #ffffff;
  --ge-muted: #1a1a2e;
  --ge-muted-foreground: #8888a0;
  --ge-accent: #ff00aa;
  --ge-accent-foreground: #ffffff;
  --ge-destructive: #ff1744;
  --ge-destructive-foreground: #ffffff;

  --ge-border: rgba(136, 136, 160, 0.15);
  --ge-input: rgba(136, 136, 160, 0.15);
  --ge-ring: rgba(0, 240, 255, 0.50);

  --ge-primary-hsl: 187 100% 50%;
  --ge-secondary-hsl: 270 50% 50%;
  --ge-destructive-hsl: 349 100% 55%;
  --ge-accent-hsl: 322 100% 50%;
  --ge-success-hsl: 151 100% 45%;
  --ge-warning-hsl: 40 100% 50%;
  --ge-error-hsl: 349 100% 55%;

  --ge-radius: 0.5rem;
}


/* ==========================================================================
   LIGHT THEME — complete overrides for all color-bearing tokens
   ========================================================================== */

[data-theme="light"] {

  /* =======================================================================
     0. SEMANTIC TOKEN LAYER (light)
     ======================================================================= */
  --ge-background: #ffffff;
  --ge-foreground: #09090b;
  --ge-card: #ffffff;
  --ge-card-foreground: #09090b;
  --ge-popover: #ffffff;
  --ge-popover-foreground: #09090b;

  --ge-primary: #0891b2;
  --ge-primary-foreground: #ffffff;
  --ge-secondary: #6d28d9;
  --ge-secondary-foreground: #ffffff;
  --ge-muted: #f1f3f5;
  --ge-muted-foreground: #71717a;
  --ge-accent: #c2185b;
  --ge-accent-foreground: #ffffff;
  --ge-destructive: #dc2626;
  --ge-destructive-foreground: #ffffff;

  --ge-border: #e4e4e7;
  --ge-input: #e4e4e7;
  --ge-ring: rgba(8, 145, 178, 0.50);

  --ge-primary-hsl: 192 91% 36%;
  --ge-secondary-hsl: 268 76% 50%;
  --ge-destructive-hsl: 0 72% 51%;
  --ge-accent-hsl: 340 82% 38%;
  --ge-success-hsl: 151 84% 34%;
  --ge-warning-hsl: 38 92% 50%;
  --ge-error-hsl: 0 72% 51%;

  --ge-radius: 0.5rem;

  /* =======================================================================
     1. COLOR SYSTEM — Backgrounds (light)
     ======================================================================= */
  --ge-bg-primary: #ffffff;
  --ge-bg-primary-rgb: 255, 255, 255;
  --ge-bg-secondary: #f8f9fa;
  --ge-bg-secondary-rgb: 248, 249, 250;
  --ge-bg-tertiary: #f1f3f5;
  --ge-bg-tertiary-rgb: 241, 243, 245;
  --ge-bg-elevated: #ffffff;
  --ge-bg-elevated-rgb: 255, 255, 255;
  --ge-bg-surface: #f8f9fa;
  --ge-bg-surface-rgb: 248, 249, 250;

  /* Overlay backgrounds (light) */
  --ge-bg-overlay: rgba(255, 255, 255, 0.70);
  --ge-bg-overlay-light: rgba(255, 255, 255, 0.40);
  --ge-bg-overlay-medium: rgba(255, 255, 255, 0.60);
  --ge-bg-overlay-heavy: rgba(255, 255, 255, 0.85);
  --ge-bg-overlay-solid: rgba(255, 255, 255, 0.95);
  --ge-bg-scrim: rgba(0, 0, 0, 0.20);
  --ge-bg-scrim-heavy: rgba(0, 0, 0, 0.40);

  /* =======================================================================
     1b. COLOR SYSTEM — Accent: Cyan (light — darkened for contrast)
     ======================================================================= */
  --ge-cyan: #0891b2;
  --ge-cyan-rgb: 8, 145, 178;
  --ge-cyan-dim: #0e7490;
  --ge-cyan-bright: #06b6d4;
  --ge-cyan-dark: #155e75;
  --ge-cyan-darker: #164e63;
  --ge-cyan-light: #67e8f9;
  --ge-cyan-alpha-5: rgba(8, 145, 178, 0.05);
  --ge-cyan-alpha-8: rgba(8, 145, 178, 0.08);
  --ge-cyan-alpha-10: rgba(8, 145, 178, 0.10);
  --ge-cyan-alpha-15: rgba(8, 145, 178, 0.15);
  --ge-cyan-alpha-20: rgba(8, 145, 178, 0.20);
  --ge-cyan-alpha-25: rgba(8, 145, 178, 0.25);
  --ge-cyan-alpha-30: rgba(8, 145, 178, 0.30);
  --ge-cyan-alpha-40: rgba(8, 145, 178, 0.40);
  --ge-cyan-alpha-50: rgba(8, 145, 178, 0.50);
  --ge-cyan-alpha-60: rgba(8, 145, 178, 0.60);
  --ge-cyan-alpha-80: rgba(8, 145, 178, 0.80);

  /* Legacy alias (light) */
  --ge-accent-cyan: #0891b2;
  --ge-accent-cyan-rgb: 8, 145, 178;
  --ge-accent-cyan-dim: #0e7490;
  --ge-accent-cyan-bright: #06b6d4;

  /* =======================================================================
     1c. COLOR SYSTEM — Accent: Magenta (light — darkened for contrast)
     ======================================================================= */
  --ge-magenta: #c2185b;
  --ge-magenta-rgb: 194, 24, 91;
  --ge-magenta-dim: #9a0e47;
  --ge-magenta-bright: #e91e63;
  --ge-magenta-dark: #880e4f;
  --ge-magenta-darker: #560027;
  --ge-magenta-light: #f48fb1;
  --ge-magenta-alpha-5: rgba(194, 24, 91, 0.05);
  --ge-magenta-alpha-8: rgba(194, 24, 91, 0.08);
  --ge-magenta-alpha-10: rgba(194, 24, 91, 0.10);
  --ge-magenta-alpha-15: rgba(194, 24, 91, 0.15);
  --ge-magenta-alpha-20: rgba(194, 24, 91, 0.20);
  --ge-magenta-alpha-25: rgba(194, 24, 91, 0.25);
  --ge-magenta-alpha-30: rgba(194, 24, 91, 0.30);
  --ge-magenta-alpha-40: rgba(194, 24, 91, 0.40);
  --ge-magenta-alpha-50: rgba(194, 24, 91, 0.50);
  --ge-magenta-alpha-60: rgba(194, 24, 91, 0.60);
  --ge-magenta-alpha-80: rgba(194, 24, 91, 0.80);

  /* Legacy alias (light) */
  --ge-accent-magenta: #c2185b;
  --ge-accent-magenta-rgb: 194, 24, 91;
  --ge-accent-magenta-dim: #9a0e47;
  --ge-accent-magenta-bright: #e91e63;

  /* =======================================================================
     1d. COLOR SYSTEM — Accent: Yellow (light — darkened for contrast)
     ======================================================================= */
  --ge-yellow: #ca8a04;
  --ge-yellow-rgb: 202, 138, 4;
  --ge-yellow-dim: #a16207;
  --ge-yellow-bright: #eab308;
  --ge-yellow-dark: #854d0e;
  --ge-yellow-darker: #713f12;
  --ge-yellow-light: #fde047;
  --ge-yellow-alpha-5: rgba(202, 138, 4, 0.05);
  --ge-yellow-alpha-8: rgba(202, 138, 4, 0.08);
  --ge-yellow-alpha-10: rgba(202, 138, 4, 0.10);
  --ge-yellow-alpha-15: rgba(202, 138, 4, 0.15);
  --ge-yellow-alpha-20: rgba(202, 138, 4, 0.20);
  --ge-yellow-alpha-25: rgba(202, 138, 4, 0.25);
  --ge-yellow-alpha-30: rgba(202, 138, 4, 0.30);
  --ge-yellow-alpha-40: rgba(202, 138, 4, 0.40);
  --ge-yellow-alpha-50: rgba(202, 138, 4, 0.50);
  --ge-yellow-alpha-60: rgba(202, 138, 4, 0.60);
  --ge-yellow-alpha-80: rgba(202, 138, 4, 0.80);

  /* Legacy alias (light) */
  --ge-accent-yellow: #ca8a04;
  --ge-accent-yellow-rgb: 202, 138, 4;
  --ge-accent-yellow-dim: #a16207;
  --ge-accent-yellow-bright: #eab308;

  /* =======================================================================
     1e. COLOR SYSTEM — Text (light)
     ======================================================================= */
  --ge-text-primary: #09090b;
  --ge-text-primary-rgb: 9, 9, 11;
  --ge-text-secondary: #52525b;
  --ge-text-secondary-rgb: 82, 82, 91;
  --ge-text-muted: #a1a1aa;
  --ge-text-muted-rgb: 161, 161, 170;
  --ge-text-inverse: #fafafa;
  --ge-text-inverse-rgb: 250, 250, 250;
  --ge-text-link: #0891b2;
  --ge-text-link-hover: #0e7490;
  --ge-text-link-visited: #7c3aed;
  --ge-text-disabled: #d4d4d8;
  --ge-text-placeholder: #a1a1aa;
  --ge-text-on-cyan: #0a0a0f;
  --ge-text-on-magenta: #ffffff;
  --ge-text-on-yellow: #0a0a0f;

  /* =======================================================================
     1f. COLOR SYSTEM — State: Success (light)
     ======================================================================= */
  --ge-success: #16a34a;
  --ge-success-rgb: 22, 163, 74;
  --ge-success-dim: #15803d;
  --ge-success-bright: #22c55e;
  --ge-success-dark: #166534;
  --ge-success-darker: #14532d;
  --ge-success-light: #86efac;
  --ge-success-alpha-10: rgba(22, 163, 74, 0.10);
  --ge-success-alpha-15: rgba(22, 163, 74, 0.15);
  --ge-success-alpha-20: rgba(22, 163, 74, 0.20);
  --ge-success-alpha-30: rgba(22, 163, 74, 0.30);
  --ge-success-alpha-50: rgba(22, 163, 74, 0.50);

  /* Legacy alias (light) */
  --ge-color-success: #16a34a;
  --ge-color-success-rgb: 22, 163, 74;

  /* =======================================================================
     1g. COLOR SYSTEM — State: Warning (light)
     ======================================================================= */
  --ge-warning: #d97706;
  --ge-warning-rgb: 217, 119, 6;
  --ge-warning-dim: #b45309;
  --ge-warning-bright: #f59e0b;
  --ge-warning-dark: #92400e;
  --ge-warning-darker: #78350f;
  --ge-warning-light: #fcd34d;
  --ge-warning-alpha-10: rgba(217, 119, 6, 0.10);
  --ge-warning-alpha-15: rgba(217, 119, 6, 0.15);
  --ge-warning-alpha-20: rgba(217, 119, 6, 0.20);
  --ge-warning-alpha-30: rgba(217, 119, 6, 0.30);
  --ge-warning-alpha-50: rgba(217, 119, 6, 0.50);

  /* Legacy alias (light) */
  --ge-color-warning: #d97706;
  --ge-color-warning-rgb: 217, 119, 6;

  /* =======================================================================
     1h. COLOR SYSTEM — State: Error (light)
     ======================================================================= */
  --ge-error: #dc2626;
  --ge-error-rgb: 220, 38, 38;
  --ge-error-dim: #b91c1c;
  --ge-error-bright: #ef4444;
  --ge-error-dark: #991b1b;
  --ge-error-darker: #7f1d1d;
  --ge-error-light: #fca5a5;
  --ge-error-alpha-10: rgba(220, 38, 38, 0.10);
  --ge-error-alpha-15: rgba(220, 38, 38, 0.15);
  --ge-error-alpha-20: rgba(220, 38, 38, 0.20);
  --ge-error-alpha-30: rgba(220, 38, 38, 0.30);
  --ge-error-alpha-50: rgba(220, 38, 38, 0.50);

  /* Legacy alias (light) */
  --ge-color-error: #dc2626;
  --ge-color-error-rgb: 220, 38, 38;

  /* =======================================================================
     1i. COLOR SYSTEM — State: Info (light)
     ======================================================================= */
  --ge-info: #0891b2;
  --ge-info-rgb: 8, 145, 178;
  --ge-info-dim: #0e7490;
  --ge-info-bright: #06b6d4;
  --ge-info-dark: #155e75;
  --ge-info-darker: #164e63;
  --ge-info-light: #67e8f9;
  --ge-info-alpha-10: rgba(8, 145, 178, 0.10);
  --ge-info-alpha-15: rgba(8, 145, 178, 0.15);
  --ge-info-alpha-20: rgba(8, 145, 178, 0.20);
  --ge-info-alpha-30: rgba(8, 145, 178, 0.30);
  --ge-info-alpha-50: rgba(8, 145, 178, 0.50);

  /* Legacy alias (light) */
  --ge-color-info: #0891b2;
  --ge-color-info-rgb: 8, 145, 178;

  /* =======================================================================
     1j. COLOR SYSTEM — Borders (light)
     ======================================================================= */
  --ge-border-default: #e4e4e7;
  --ge-border-light: #f4f4f5;
  --ge-border-lighter: #fafafa;
  --ge-border-dark: #d4d4d8;
  --ge-border-accent: rgba(8, 145, 178, 0.30);
  --ge-border-accent-magenta: rgba(194, 24, 91, 0.30);
  --ge-border-accent-yellow: rgba(202, 138, 4, 0.30);
  --ge-border-success: rgba(22, 163, 74, 0.30);
  --ge-border-warning: rgba(217, 119, 6, 0.30);
  --ge-border-error: rgba(220, 38, 38, 0.30);
  --ge-border-focus: rgba(8, 145, 178, 0.60);

  /* Legacy aliases (light) */
  --ge-border-color: #e4e4e7;
  --ge-border-color-light: #f4f4f5;
  --ge-border-color-accent: #0891b2;

  /* =======================================================================
     1k. COLOR SYSTEM — Gradients (light)
     ======================================================================= */
  --ge-gradient-cyan-magenta: linear-gradient(135deg, #0891b2, #c2185b);
  --ge-gradient-magenta-cyan: linear-gradient(135deg, #c2185b, #0891b2);
  --ge-gradient-cyan-yellow: linear-gradient(135deg, #0891b2, #ca8a04);
  --ge-gradient-magenta-yellow: linear-gradient(135deg, #c2185b, #ca8a04);
  --ge-gradient-warm: linear-gradient(135deg, #c2185b, #ca8a04);
  --ge-gradient-cool: linear-gradient(135deg, #155e75, #0891b2);
  --ge-gradient-dark: linear-gradient(180deg, #ffffff, #f1f3f5);
  --ge-gradient-dark-reverse: linear-gradient(180deg, #f1f3f5, #ffffff);
  --ge-gradient-dark-horizontal: linear-gradient(90deg, #ffffff, #f1f3f5);
  --ge-gradient-surface: linear-gradient(180deg, #f8f9fa, #ffffff);
  --ge-gradient-elevated: linear-gradient(180deg, #ffffff, #f8f9fa);
  --ge-gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(248, 249, 250, 0.60));
  --ge-gradient-glow-cyan: radial-gradient(ellipse at center, rgba(8, 145, 178, 0.06), transparent 70%);
  --ge-gradient-glow-magenta: radial-gradient(ellipse at center, rgba(194, 24, 91, 0.06), transparent 70%);
  --ge-gradient-glow-yellow: radial-gradient(ellipse at center, rgba(202, 138, 4, 0.06), transparent 70%);
  --ge-gradient-mesh: radial-gradient(at 20% 30%, rgba(8, 145, 178, 0.04) 0%, transparent 50%), radial-gradient(at 80% 70%, rgba(194, 24, 91, 0.04) 0%, transparent 50%);
  --ge-gradient-diagonal: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 50%, #e9ecef 100%);
  --ge-gradient-scanline: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(8, 145, 178, 0.015) 2px, rgba(8, 145, 178, 0.015) 4px);
  --ge-gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(8, 145, 178, 0.03) 50%, transparent 100%);

  /* =======================================================================
     6. SHADOWS (light — softer, higher opacity base)
     ======================================================================= */
  --ge-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ge-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ge-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --ge-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --ge-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --ge-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --ge-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* =======================================================================
     6b–6d. SHADOWS — Glow effects (light — much more subtle)
     ======================================================================= */
  --ge-glow-cyan-subtle: 0 0 6px rgba(8, 145, 178, 0.08);
  --ge-glow-cyan: 0 0 12px rgba(8, 145, 178, 0.12), 0 0 24px rgba(8, 145, 178, 0.04);
  --ge-glow-cyan-strong: 0 0 16px rgba(8, 145, 178, 0.20), 0 0 32px rgba(8, 145, 178, 0.08), 0 0 48px rgba(8, 145, 178, 0.04);

  --ge-glow-magenta-subtle: 0 0 6px rgba(194, 24, 91, 0.08);
  --ge-glow-magenta: 0 0 12px rgba(194, 24, 91, 0.12), 0 0 24px rgba(194, 24, 91, 0.04);
  --ge-glow-magenta-strong: 0 0 16px rgba(194, 24, 91, 0.20), 0 0 32px rgba(194, 24, 91, 0.08), 0 0 48px rgba(194, 24, 91, 0.04);

  --ge-glow-yellow-subtle: 0 0 6px rgba(202, 138, 4, 0.08);
  --ge-glow-yellow: 0 0 12px rgba(202, 138, 4, 0.12), 0 0 24px rgba(202, 138, 4, 0.04);
  --ge-glow-yellow-strong: 0 0 16px rgba(202, 138, 4, 0.20), 0 0 32px rgba(202, 138, 4, 0.08), 0 0 48px rgba(202, 138, 4, 0.04);

  /* =======================================================================
     6e. SHADOWS — Glow effects: State colors (light)
     ======================================================================= */
  --ge-glow-success-subtle: 0 0 6px rgba(22, 163, 74, 0.08);
  --ge-glow-success: 0 0 12px rgba(22, 163, 74, 0.12), 0 0 24px rgba(22, 163, 74, 0.04);
  --ge-glow-success-strong: 0 0 16px rgba(22, 163, 74, 0.20), 0 0 32px rgba(22, 163, 74, 0.08);
  --ge-glow-warning-subtle: 0 0 6px rgba(217, 119, 6, 0.08);
  --ge-glow-warning: 0 0 12px rgba(217, 119, 6, 0.12), 0 0 24px rgba(217, 119, 6, 0.04);
  --ge-glow-warning-strong: 0 0 16px rgba(217, 119, 6, 0.20), 0 0 32px rgba(217, 119, 6, 0.08);
  --ge-glow-error-subtle: 0 0 6px rgba(220, 38, 38, 0.08);
  --ge-glow-error: 0 0 12px rgba(220, 38, 38, 0.12), 0 0 24px rgba(220, 38, 38, 0.04);
  --ge-glow-error-strong: 0 0 16px rgba(220, 38, 38, 0.20), 0 0 32px rgba(220, 38, 38, 0.08);

  /* =======================================================================
     6f. SHADOWS — Text shadows (light — muted)
     ======================================================================= */
  --ge-text-shadow-default: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ge-text-shadow-cyan: 0 0 8px rgba(8, 145, 178, 0.15), 0 0 16px rgba(8, 145, 178, 0.06);
  --ge-text-shadow-cyan-strong: 0 0 12px rgba(8, 145, 178, 0.25), 0 0 24px rgba(8, 145, 178, 0.10), 0 0 40px rgba(8, 145, 178, 0.04);
  --ge-text-shadow-magenta: 0 0 8px rgba(194, 24, 91, 0.15), 0 0 16px rgba(194, 24, 91, 0.06);
  --ge-text-shadow-magenta-strong: 0 0 12px rgba(194, 24, 91, 0.25), 0 0 24px rgba(194, 24, 91, 0.10), 0 0 40px rgba(194, 24, 91, 0.04);
  --ge-text-shadow-yellow: 0 0 8px rgba(202, 138, 4, 0.15), 0 0 16px rgba(202, 138, 4, 0.06);
  --ge-text-shadow-yellow-strong: 0 0 12px rgba(202, 138, 4, 0.25), 0 0 24px rgba(202, 138, 4, 0.10), 0 0 40px rgba(202, 138, 4, 0.04);
  --ge-text-shadow-glow: 0 0 4px rgba(8, 145, 178, 0.12);

  /* =======================================================================
     11a. COMPONENT TOKENS — Buttons (light)
     ======================================================================= */
  --ge-btn-focus-ring-color: rgba(8, 145, 178, 0.40);

  /* =======================================================================
     11b. COMPONENT TOKENS — Inputs (light)
     ======================================================================= */
  --ge-input-bg: #ffffff;
  --ge-input-bg-hover: #f8f9fa;
  --ge-input-bg-focus: #ffffff;
  --ge-input-bg-disabled: #f4f4f5;
  --ge-input-border: #e4e4e7;
  --ge-input-border-hover: #d4d4d8;
  --ge-input-border-focus: rgba(8, 145, 178, 0.60);
  --ge-input-border-error: rgba(220, 38, 38, 0.60);
  --ge-input-border-success: rgba(22, 163, 74, 0.60);
  --ge-input-color: #09090b;
  --ge-input-placeholder: #a1a1aa;
  --ge-input-focus-ring-color: rgba(8, 145, 178, 0.20);
  --ge-input-label-color: #52525b;
  --ge-input-helper-color: #a1a1aa;

  /* =======================================================================
     11c. COMPONENT TOKENS — Cards (light)
     ======================================================================= */
  --ge-card-bg: #ffffff;
  --ge-card-bg-hover: #f8f9fa;
  --ge-card-border: #e4e4e7;
  --ge-card-border-hover: rgba(8, 145, 178, 0.25);
  --ge-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* =======================================================================
     11d. COMPONENT TOKENS — Modals (light)
     ======================================================================= */
  --ge-modal-bg: #ffffff;
  --ge-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --ge-modal-overlay-bg: rgba(0, 0, 0, 0.30);

  /* =======================================================================
     11e. COMPONENT TOKENS — Tooltips (light)
     ======================================================================= */
  --ge-tooltip-bg: #18181b;
  --ge-tooltip-color: #fafafa;
  --ge-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* =======================================================================
     11h. COMPONENT TOKENS — Navbar (light)
     ======================================================================= */
  --ge-navbar-bg: rgba(255, 255, 255, 0.85);
  --ge-navbar-bg-solid: #ffffff;
  --ge-navbar-border: #e4e4e7;

  /* =======================================================================
     11i. COMPONENT TOKENS — Sidebar (light)
     ======================================================================= */
  --ge-sidebar-bg: #f8f9fa;
  --ge-sidebar-border: #e4e4e7;

  /* =======================================================================
     11j. COMPONENT TOKENS — Dropdown (light)
     ======================================================================= */
  --ge-dropdown-bg: #ffffff;
  --ge-dropdown-border: #e4e4e7;
  --ge-dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  --ge-dropdown-item-hover-bg: rgba(8, 145, 178, 0.06);
  --ge-dropdown-item-active-bg: rgba(8, 145, 178, 0.12);
  --ge-dropdown-divider: #f4f4f5;
  --ge-dropdown-group-label-color: #a1a1aa;

  /* =======================================================================
     11k. COMPONENT TOKENS — Toggle / Switch (light)
     ======================================================================= */
  --ge-toggle-bg-off: #e4e4e7;
  --ge-toggle-bg-on: #0891b2;
  --ge-toggle-border: #d4d4d8;
  --ge-toggle-thumb-color: #ffffff;
  --ge-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* =======================================================================
     11l. COMPONENT TOKENS — Avatar (light)
     ======================================================================= */
  --ge-avatar-border-color: rgba(8, 145, 178, 0.30);
  --ge-avatar-bg: #f1f3f5;

  /* =======================================================================
     11m. COMPONENT TOKENS — Toast / Notification (light)
     ======================================================================= */
  --ge-toast-bg: #ffffff;
  --ge-toast-border: #e4e4e7;
  --ge-toast-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* =======================================================================
     11n. COMPONENT TOKENS — Progress (light)
     ======================================================================= */
  --ge-progress-bg: #e4e4e7;
  --ge-progress-fill: #0891b2;
  --ge-progress-fill-success: #16a34a;
  --ge-progress-fill-warning: #d97706;
  --ge-progress-fill-error: #dc2626;

  /* =======================================================================
     11o. COMPONENT TOKENS — Tabs (light)
     ======================================================================= */
  --ge-tab-indicator-color: #0891b2;
  --ge-tab-color: #71717a;
  --ge-tab-color-active: #09090b;
  --ge-tab-color-hover: #09090b;
  --ge-tab-color-disabled: #d4d4d8;
  --ge-tab-bg-hover: rgba(8, 145, 178, 0.04);
  --ge-tab-list-border: #e4e4e7;

  /* =======================================================================
     11p. COMPONENT TOKENS — Accordion (light)
     ======================================================================= */
  --ge-accordion-border: #e4e4e7;
  --ge-accordion-bg-hover: rgba(8, 145, 178, 0.03);
  --ge-accordion-header-color: #09090b;
  --ge-accordion-content-color: #52525b;

  /* =======================================================================
     11q. COMPONENT TOKENS — Divider (light)
     ======================================================================= */
  --ge-divider-color: #e4e4e7;
  --ge-divider-color-strong: #d4d4d8;
  --ge-divider-color-accent: rgba(8, 145, 178, 0.20);
  --ge-divider-color-magenta: rgba(194, 24, 91, 0.20);

  /* =======================================================================
     11r. COMPONENT TOKENS — Skeleton Loading (light)
     ======================================================================= */
  --ge-skeleton-base: #f1f3f5;
  --ge-skeleton-highlight: #e9ecef;

  /* =======================================================================
     11s. COMPONENT TOKENS — Scrollbar (light)
     ======================================================================= */
  --ge-scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --ge-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
  --ge-scrollbar-track-bg: rgba(0, 0, 0, 0.03);

  /* =======================================================================
     11t. COMPONENT TOKENS — Focus Ring (light)
     ======================================================================= */
  --ge-focus-ring-color: rgba(8, 145, 178, 0.40);
  --ge-focus-ring-color-error: rgba(220, 38, 38, 0.40);
  --ge-focus-ring-color-success: rgba(22, 163, 74, 0.40);

  /* =======================================================================
     11v. COMPONENT TOKENS — Table (light)
     ======================================================================= */
  --ge-table-header-bg: #f8f9fa;
  --ge-table-header-color: #52525b;
  --ge-table-row-bg-hover: rgba(8, 145, 178, 0.03);
  --ge-table-row-bg-stripe: rgba(0, 0, 0, 0.02);
  --ge-table-row-bg-selected: rgba(8, 145, 178, 0.06);
  --ge-table-border: #f4f4f5;

  /* =======================================================================
     11w. COMPONENT TOKENS — Popover (light)
     ======================================================================= */
  --ge-popover-bg: #ffffff;
  --ge-popover-border: #e4e4e7;
  --ge-popover-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* =======================================================================
     17. SELECTION COLORS (light)
     ======================================================================= */
  --ge-selection-bg: rgba(8, 145, 178, 0.35);
  --ge-selection-color: #09090b;

  /* =======================================================================
     18. PRINT OVERRIDES (light — unchanged, already light)
     ======================================================================= */
  --ge-print-text: #000000;
  --ge-print-bg: #ffffff;
  --ge-print-border: #cccccc;
}