/* ============================================================
   GROW LEVEL — Design Tokens
   Dark, premium, technological. Single source of truth.
   ============================================================ */

:root {
  /* ---------- Core palette: deep blacks & dark blues ---------- */
  --gl-black:          #05060a;   /* page base */
  --gl-black-2:        #070912;   /* deeper wells */
  --gl-surface:        #0b0e18;   /* raised surface */
  --gl-surface-2:      #0f1320;   /* cards */
  --gl-surface-3:      #141a2b;   /* hovered cards */
  --gl-elevated:       #171d2e;   /* popovers / menus */

  /* ---------- Borders & strokes ---------- */
  --gl-border:         rgba(255, 255, 255, 0.06);
  --gl-border-strong:  rgba(255, 255, 255, 0.12);
  --gl-border-accent:  rgba(56, 128, 255, 0.35);

  /* ---------- Text ---------- */
  --gl-text:           #f4f6fb;
  --gl-text-soft:      #c3cad9;
  --gl-text-muted:     #8b93a7;
  --gl-text-faint:     #5b6479;

  /* ---------- Accents: electric blue + cyan ---------- */
  --gl-blue:           #3b82f6;
  --gl-blue-bright:    #4d94ff;
  --gl-blue-deep:      #1d4ed8;
  --gl-cyan:           #22d3ee;
  --gl-cyan-soft:      #67e8f9;
  --gl-violet:         #7c8cff;

  /* ---------- Signal colors ---------- */
  --gl-success:        #34d399;
  --gl-warning:        #fbbf24;

  /* ---------- Gradients ---------- */
  --gl-grad-brand:     linear-gradient(135deg, #4d94ff 0%, #22d3ee 100%);
  --gl-grad-brand-soft:linear-gradient(135deg, rgba(77,148,255,0.16), rgba(34,211,238,0.10));
  --gl-grad-text:      linear-gradient(120deg, #ffffff 0%, #b9c6ff 45%, #7fe6ff 100%);
  --gl-grad-surface:   linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  --gl-grad-halo:      radial-gradient(circle at 50% 0%, rgba(61,130,246,0.22), transparent 60%);

  /* ---------- Glass ---------- */
  --gl-glass:          rgba(13, 17, 28, 0.55);
  --gl-glass-strong:   rgba(13, 17, 28, 0.75);
  --gl-glass-border:   rgba(255, 255, 255, 0.08);
  --gl-blur:           blur(18px) saturate(140%);

  /* ---------- Shadows & glows ---------- */
  --gl-shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
  --gl-shadow:         0 12px 40px -12px rgba(0,0,0,0.7);
  --gl-shadow-lg:      0 40px 90px -30px rgba(0,0,0,0.85);
  --gl-glow-blue:      0 0 0 1px rgba(61,130,246,0.35), 0 8px 40px -8px rgba(61,130,246,0.45);
  --gl-glow-cyan:      0 0 40px -6px rgba(34,211,238,0.5);

  /* ---------- Typography ---------- */
  --gl-font-sans: "Inter", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gl-font-display: "Space Grotesk", "Inter", sans-serif;
  --gl-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace;

  --gl-fs-xs:    0.75rem;   /* 12 */
  --gl-fs-sm:    0.875rem;  /* 14 */
  --gl-fs-base:  1rem;      /* 16 */
  --gl-fs-lg:    1.125rem;  /* 18 */
  --gl-fs-xl:    1.375rem;  /* 22 */
  --gl-fs-2xl:   1.75rem;   /* 28 */
  --gl-fs-3xl:   2.25rem;   /* 36 */
  --gl-fs-4xl:   3rem;      /* 48 */
  --gl-fs-5xl:   clamp(2.6rem, 5.2vw, 4.6rem);
  --gl-fs-6xl:   clamp(3.2rem, 7vw, 6rem);

  --gl-lh-tight: 1.05;
  --gl-lh-snug:  1.2;
  --gl-lh-base:  1.65;

  /* ---------- Spacing scale ---------- */
  --gl-sp-1:  0.25rem;
  --gl-sp-2:  0.5rem;
  --gl-sp-3:  0.75rem;
  --gl-sp-4:  1rem;
  --gl-sp-5:  1.5rem;
  --gl-sp-6:  2rem;
  --gl-sp-7:  3rem;
  --gl-sp-8:  4rem;
  --gl-sp-9:  6rem;
  --gl-sp-10: 8rem;

  /* ---------- Radii ---------- */
  --gl-r-sm:  8px;
  --gl-r-md:  14px;
  --gl-r-lg:  20px;
  --gl-r-xl:  28px;
  --gl-r-pill: 999px;

  /* ---------- Layout ---------- */
  --gl-container: 1200px;
  --gl-container-wide: 1360px;
  --gl-nav-h: 72px;

  /* ---------- Motion ---------- */
  --gl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gl-dur-fast: 160ms;
  --gl-dur: 320ms;
  --gl-dur-slow: 620ms;

  /* ---------- Z-index ---------- */
  --gl-z-nav: 1000;
  --gl-z-menu: 1010;
  --gl-z-modal: 1100;
  --gl-z-toast: 1200;
}