/* ===========================================================================
   FLNT AI — Design Tokens · "Kinetic Obsidian"
   Single source of truth for color, type, spacing, radius, elevation, motion.
   Consumed by main.css. Style with these custom properties, never hard-coded
   values. Mirrors _ds/.../tokens/* from the exported design system.
   =========================================================================== */

:root {
  /* ---- Fonts ------------------------------------------------------------- */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif; /* headlines, labels, UI */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif; /* long-form copy */
  --font-icon:    'Material Symbols Outlined';

  /* ---- Obsidian canvas (Material tonal dark surfaces) -------------------- */
  --obsidian:                  #050505; /* page floor — pure black */
  --surface:                   #121315;
  --surface-bright:            #38393b;
  --surface-soft:              #111111;
  --surface-container-lowest:  #0d0e10;
  --surface-container-low:     #1b1c1e;
  --surface-container:         #1f2022;
  --surface-container-high:    #292a2c;
  --surface-container-highest: #343537;
  --surface-variant:           #343537;

  /* ---- Foreground / text ------------------------------------------------- */
  --on-surface:          #e3e2e4; /* primary text */
  --on-surface-variant:  #c4c7c7; /* secondary / muted */
  --primary-container:   #050505;

  /* ---- Lines & outlines -------------------------------------------------- */
  --outline:          #8e9192;
  --outline-variant:  #444748;
  --glass-border:     rgba(255, 255, 255, 0.12); /* signature 1px hairline */

  /* ---- Plasma accents (used sparingly) ----------------------------------- */
  --electric-cyan:  #00F0FF;
  --plasma-purple:  #673DE6;
  --hot-pink:       #FF007A;
  --logo-cyan:      #00F2FF;
  --logo-violet:    #7000FF;
  --error:          #ffb4ab;

  /* ---- Semantic aliases (prefer these in markup) ------------------------- */
  --bg-page:       var(--obsidian);
  --bg-section:    var(--surface-container-low);
  --text-primary:  var(--on-surface);
  --text-muted:    var(--on-surface-variant);
  --text-on-accent:#ffffff;

  --surface-card:  rgba(255, 255, 255, 0.03); /* glass card fill */
  --surface-panel: rgba(18, 19, 21, 0.40);    /* glass panel fill */
  --border-hairline: var(--glass-border);

  /* the one gradient the brand uses — cyan → purple */
  --gradient-plasma:      linear-gradient(90deg,  var(--electric-cyan) 0%, var(--plasma-purple) 100%);
  --gradient-plasma-diag: linear-gradient(135deg, var(--logo-cyan) 0%, var(--logo-violet) 100%);

  /* ---- Typographic scale (size / line / tracking / weight) --------------- */
  --display-2xl-size: 72px; --display-2xl-line: 80px; --display-2xl-track: -0.04em; --display-2xl-weight: 800;
  --display-lg-size:  48px; --display-lg-line:  56px; --display-lg-track:  -0.03em; --display-lg-weight:  700;
  --headline-lg-size: 32px; --headline-lg-line: 40px; --headline-lg-track: -0.02em; --headline-lg-weight: 600;
  --headline-sm-size: 24px; --headline-sm-line: 32px; --headline-sm-track: -0.01em; --headline-sm-weight: 600;
  --body-lg-size:     18px; --body-lg-line:     28px; --body-lg-weight:     400;
  --body-md-size:     16px; --body-md-line:     24px; --body-md-weight:     400;
  --label-md-size:    14px; --label-md-line:    20px; --label-md-track:   0.05em; --label-md-weight: 500;
  --label-sm-size:    12px; --label-sm-line:    16px; --label-sm-track:   0.08em; --label-sm-weight: 600;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-stack-sm:    0.5rem;  /*  8px */
  --space-stack-md:    1.5rem;  /* 24px */
  --space-stack-lg:    4rem;    /* 64px */
  --space-stack-xl:    8rem;    /* 128px — major section rhythm */
  --space-gutter:      2rem;    /* 32px — grid gutter */
  --space-margin-edge: 4rem;    /* 64px — page edge margin (desktop) */
  --container-max:     1440px;

  /* ---- Corner radii ------------------------------------------------------ */
  --radius-sm:   0.25rem; /*  4px — chips */
  --radius-md:   0.5rem;  /*  8px — inputs, buttons */
  --radius-lg:   0.75rem; /* 12px — small cards */
  --radius-xl:   1.5rem;  /* 24px — signature glass cards */
  --radius-full: 9999px;  /* pills, dots, avatars */

  /* ---- Glass / elevation (depth = blur + hairline + glow, not shadow) ---- */
  --blur-card:  24px;
  --blur-modal: 40px;
  --blur-chip:  8px;
  --glow-cyan:        0 0 20px rgba(0, 240, 255, 0.40);
  --glow-cyan-strong: 0 0 30px rgba(0, 240, 255, 0.60);
  --glow-cyan-soft:   0 0 30px rgba(0, 240, 255, 0.10);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   0.3s;
  --dur-reveal: 0.8s;
  --lift:      -2px;
  --lift-card: -5px;
}

/* Mobile edge margin shrinks the generous desktop gutter. */
@media (max-width: 768px) {
  :root { --space-margin-edge: 1.5rem; }
}