/* ============================================================
   scanlink — design tokens v1.0
   Architecture: primitive → semantic → component
   Theme: "Luminous Depth" — dark cinematic blue, glass, glow
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────
     LAYER 1 · PRIMITIVES (raw values, never used
     directly in components — alias them semantically)
     ────────────────────────────────────────────── */

  /* Brand blue — "signal" ramp (from luminous website refs) */
  --blue-50:  #F2F8FF;
  --blue-100: #E3EEFF;
  --blue-200: #BFD9FF;
  --blue-300: #8FBCFF;
  --blue-400: #5B9BFF;
  --blue-500: #2E7CF6;   /* core brand blue */
  --blue-600: #1E5AD7;
  --blue-700: #123C8F;
  --blue-800: #0A2456;
  --blue-900: #061638;
  --blue-950: #030A1C;

  /* Ink — blue-tinted neutrals (canvas + text) */
  --ink-50:  #F4F7FC;
  --ink-100: #E4EAF4;
  --ink-200: #C2CDE1;
  --ink-300: #93A4C3;
  --ink-400: #64779B;
  --ink-500: #3E5174;
  --ink-600: #2A3A57;
  --ink-700: #1B2740;
  --ink-800: #111A2E;
  --ink-900: #0A101F;
  --ink-950: #020617;   /* the abyss — primary canvas */

  /* Cyan — secondary "current" ramp (electric edge) */
  --cyan-300: #8FEFFB;
  --cyan-400: #4AE3F7;
  --cyan-500: #22D3EE;
  --cyan-600: #0FB5CF;
  --cyan-700: #0B8CA1;

  /* Violet — secondary "nebula" ramp (depth partner) */
  --violet-300: #BDB5FA;
  --violet-400: #9D93F7;
  --violet-500: #7C6FF2;
  --violet-600: #5F4FE8;
  --violet-700: #4A3BC7;

  /* Amber — accent "flare" (the 10% warm signal) */
  --amber-300: #FFDC7A;
  --amber-400: #FFC93D;
  --amber-500: #FFB020;
  --amber-600: #E08F00;

  /* Status primitives */
  --green-400: #4ADE9B;
  --green-500: #2FD181;
  --green-600: #1FA968;
  --red-400:   #FF7A87;
  --red-500:   #FF5C6C;
  --red-600:   #E13D4E;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Alpha — white (glass + borders on dark) */
  --alpha-white-4:  rgba(255,255,255,0.04);
  --alpha-white-6:  rgba(255,255,255,0.06);
  --alpha-white-8:  rgba(255,255,255,0.08);
  --alpha-white-12: rgba(255,255,255,0.12);
  --alpha-white-16: rgba(255,255,255,0.16);
  --alpha-white-24: rgba(255,255,255,0.24);
  --alpha-white-64: rgba(255,255,255,0.64);

  /* Alpha — blue (glows, tints) */
  --alpha-blue-8:  rgba(46,124,246,0.08);
  --alpha-blue-16: rgba(46,124,246,0.16);
  --alpha-blue-24: rgba(46,124,246,0.24);
  --alpha-blue-40: rgba(46,124,246,0.40);

  /* Typography primitives */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11 — mono micro-labels */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-md:  1rem;       /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.375rem;   /* 22 */
  --display-xs:  1.75rem; /* 28 */
  --display-sm:  2.25rem; /* 36 */
  --display-md:  3rem;    /* 48 */
  --display-lg:  4rem;    /* 64 */
  --display-xl:  5.5rem;  /* 88 */
  --display-2xl: 7.5rem;  /* 120 — hero wordmark scale */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.04;  /* display */
  --leading-snug:   1.2;   /* headings */
  --leading-normal: 1.5;   /* UI text */
  --leading-loose:  1.7;   /* long-form body */

  --tracking-tight:  -0.03em;  /* display */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.18em;   /* mono eyebrow labels */

  /* Spacing — 4px base */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-xs:  0.25rem;
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 999px;

  /* Elevation — shadow + luminous glow */
  --shadow-sm: 0 1px 2px rgba(2,6,23,0.5);
  --shadow-md: 0 8px 24px -8px rgba(2,6,23,0.6);
  --shadow-lg: 0 24px 64px -16px rgba(2,6,23,0.8);
  --glow-sm: 0 0 16px var(--alpha-blue-24);
  --glow-md: 0 0 40px var(--alpha-blue-24), 0 0 12px var(--alpha-blue-16);
  --glow-lg: 0 0 80px var(--alpha-blue-40), 0 0 24px var(--alpha-blue-24);

  /* Blur */
  --blur-glass: 24px;
  --blur-heavy: 64px;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-normal: 240ms;
  --duration-slow:   480ms;


  /* ──────────────────────────────────────────────
     LAYER 2 · SEMANTIC (purpose-driven aliases)
     ────────────────────────────────────────────── */

  /* Surfaces */
  --surface-canvas:   var(--ink-950);       /* page background */
  --surface-raised:   var(--ink-900);       /* cards, panels */
  --surface-overlay:  var(--ink-800);       /* popovers, menus */
  --surface-sunken:   var(--black);         /* wells, code blocks */
  --surface-glass:    var(--alpha-white-6); /* frosted panels */
  --surface-brand:    var(--blue-500);
  --surface-brand-subtle: var(--alpha-blue-16);

  /* Text */
  --text-primary:   var(--ink-50);
  --text-secondary: var(--ink-300);
  --text-tertiary:  var(--ink-400);
  --text-inverse:   var(--ink-950);
  --text-brand:     var(--blue-400);
  --text-on-brand:  var(--white);

  /* Borders */
  --border-subtle:  var(--alpha-white-8);
  --border-default: var(--alpha-white-12);
  --border-strong:  var(--alpha-white-24);
  --border-brand:   var(--blue-500);

  /* Interactive */
  --interactive-primary:        var(--blue-500);
  --interactive-primary-hover:  var(--blue-400);
  --interactive-primary-active: var(--blue-600);
  --interactive-secondary:      var(--cyan-500);
  --interactive-accent:         var(--amber-500);
  --focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--blue-400);

  /* Status */
  --status-success: var(--green-500);
  --status-warning: var(--amber-500);
  --status-danger:  var(--red-500);
  --status-info:    var(--cyan-500);
  --status-success-subtle: rgba(47,209,129,0.12);
  --status-warning-subtle: rgba(255,176,32,0.12);
  --status-danger-subtle:  rgba(255,92,108,0.12);
  --status-info-subtle:    rgba(34,211,238,0.12);

  /* Signature gradients */
  --gradient-luminous: radial-gradient(ellipse 80% 60% at 50% 0%,
      var(--alpha-blue-40) 0%, rgba(46,124,246,0.12) 40%, transparent 70%);
  --gradient-beam: linear-gradient(180deg,
      var(--blue-300) 0%, var(--blue-500) 45%, transparent 100%);
  --gradient-aurora: linear-gradient(115deg,
      var(--blue-500) 0%, var(--cyan-500) 50%, var(--violet-500) 100%);
  --gradient-eclipse: radial-gradient(circle at 35% 35%,
      var(--blue-300) 0%, var(--blue-600) 45%, var(--ink-950) 100%);
  --gradient-ice: linear-gradient(180deg, var(--white) 0%, var(--blue-100) 100%);
  --gradient-text: linear-gradient(180deg, var(--white) 20%, var(--blue-300) 100%);


  /* ──────────────────────────────────────────────
     LAYER 3 · COMPONENT
     ────────────────────────────────────────────── */

  /* Button */
  --button-radius: var(--radius-full);
  --button-font: var(--weight-medium) var(--text-sm)/1 var(--font-body);
  --button-pad-x: var(--space-6);
  --button-height: 2.75rem;
  --button-primary-bg: var(--interactive-primary);
  --button-primary-bg-hover: var(--interactive-primary-hover);
  --button-primary-bg-active: var(--interactive-primary-active);
  --button-primary-fg: var(--text-on-brand);
  --button-primary-glow: var(--glow-sm);
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--border-strong);
  --button-secondary-fg: var(--text-primary);
  --button-glass-bg: var(--surface-glass);
  --button-glass-border: var(--border-default);
  --button-ghost-fg: var(--text-secondary);

  /* Card */
  --card-bg: var(--surface-raised);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-xl);
  --card-pad: var(--space-8);
  --card-glass-bg: var(--surface-glass);
  --card-glass-border: var(--border-default);
  --card-glass-blur: var(--blur-glass);

  /* Input */
  --input-bg: var(--alpha-white-4);
  --input-border: var(--border-default);
  --input-border-focus: var(--blue-400);
  --input-radius: var(--radius-md);
  --input-height: 2.75rem;
  --input-fg: var(--text-primary);
  --input-placeholder: var(--text-tertiary);

  /* Badge / chip */
  --badge-radius: var(--radius-full);
  --badge-font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono);
  --badge-tracking: var(--tracking-wide);
  --badge-bg: var(--surface-brand-subtle);
  --badge-fg: var(--blue-300);
  --badge-border: rgba(46,124,246,0.32);

  /* Nav */
  --nav-bg: rgba(2,6,23,0.72);
  --nav-blur: var(--blur-glass);
  --nav-border: var(--border-subtle);
  --nav-height: 4.5rem;

  /* Stat (big cinematic numerals) */
  --stat-font: var(--weight-medium) var(--display-lg)/1 var(--font-display);
  --stat-fg: var(--gradient-text);
  --stat-label-fg: var(--text-tertiary);

  /* Code / QR well */
  --well-bg: var(--surface-sunken);
  --well-border: var(--border-subtle);
  --well-radius: var(--radius-lg);
}

/* Light-context tokens (print, docs, light embeds) */
[data-theme="light"] {
  --surface-canvas:  var(--blue-50);
  --surface-raised:  var(--white);
  --surface-overlay: var(--white);
  --surface-glass:   rgba(2,6,23,0.04);
  --text-primary:    var(--ink-950);
  --text-secondary:  var(--ink-500);
  --text-tertiary:   var(--ink-400);
  --border-subtle:   rgba(2,6,23,0.06);
  --border-default:  rgba(2,6,23,0.12);
  --border-strong:   rgba(2,6,23,0.24);
  --nav-bg: rgba(244,247,252,0.8);
  --gradient-text: linear-gradient(180deg, var(--ink-950) 20%, var(--blue-600) 100%);
}