/* ============================================================
   dop∃mine — Design tokens
   Consolidated verbatim from /design/dopamine-design-system/
   project/tokens/{colors,typography,spacing,effects}.css.
   That directory is the source of truth; reconcile there first.
   ============================================================ */

/* ------------------------------------------------------------
   Colors — cool charcoal grayscale, one electric red accent
   ------------------------------------------------------------ */
:root {
  /* --- Neutrals: cool charcoal ramp (sampled from the cover) --- */
  --ink-950: #000000;   /* absolute black */
  --ink-900: #101010;   /* deepest shadow */
  --ink-850: #181818;
  --ink-800: #202020;
  --ink-700: #303030;
  --ink-600: #404040;   /* dominant background of the cover */
  --ink-500: #505050;
  --ink-400: #606060;
  --ink-300: #8a8c8e;
  --ink-200: #b6b8ba;
  --ink-100: #d9dadc;
  --ink-050: #eceded;
  --white:   #ffffff;

  /* slight cool cast seen in the portrait's midtones */
  --ink-cool-700: #2b2d30;
  --ink-cool-600: #3a3c3f;

  /* --- Accent: electric red (the hand) --- */
  --red-500: #ec2910;   /* brightest highlight on the hand */
  --red-600: #e5290f;   /* PRIMARY brand red */
  --red-700: #c02000;
  --red-800: #a01000;
  --red-900: #801000;   /* deep shadow red */
  --red-glow: rgba(236, 41, 16, 0.45);

  /* --- Semantic aliases — reference these in components --- */
  --bg-base:        var(--ink-900);   /* app canvas */
  --bg-raised:      var(--ink-800);   /* panels */
  --bg-sunken:      var(--ink-950);   /* wells, inputs */
  --surface-card:   var(--ink-700);   /* cards */
  --surface-hover:  var(--ink-600);
  --surface-active: var(--ink-500);

  --border-subtle:  var(--ink-700);
  --border-default: var(--ink-500);
  --border-strong:  var(--ink-300);
  --border-accent:  var(--red-600);

  --text-primary:   var(--white);
  --text-secondary: var(--ink-200);
  --text-tertiary:  var(--ink-300);
  --text-disabled:  var(--ink-400);
  --text-accent:    var(--red-600);
  --text-on-accent: var(--white);

  --accent:         var(--red-600);
  --accent-hover:   var(--red-500);
  --accent-press:   var(--red-700);

  --focus-ring:     var(--red-500);

  /* status — kept inside the monochrome+red world; only red is "loud" */
  --status-danger:  var(--red-600);
  --status-ok:      var(--ink-100);
  --status-muted:   var(--ink-400);
}

/* ------------------------------------------------------------
   Typography — jag type family (owner decision 2026-07-03,
   supersedes the design system's Silkscreen/Space Grotesk/
   Space Mono set): Inter Tight display, Inter body,
   JetBrains Mono labels/data
   ------------------------------------------------------------ */
:root {
  /* families */
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid display sizes — pixel type reads best BIG */
  --fs-display-xl: clamp(48px, 9vw, 120px);
  --fs-display-l:  clamp(36px, 6vw, 72px);
  --fs-display-m:  clamp(28px, 4vw, 44px);

  /* text scale */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-label: 12px;   /* mono, uppercase, tracked */
  --fs-micro: 10px;

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* letter spacing — pixel/mono labels are widely tracked */
  --ls-display: 0.18em;
  --ls-label:   0.22em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
}

/* ------------------------------------------------------------
   Spacing, radii, layout — brutalist grid, hard edges
   ------------------------------------------------------------ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* radii — mostly sharp; the brand favours hard corners */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* borders */
  --bw-hairline: 1px;
  --bw-default: 1.5px;
  --bw-bold: 3px;

  /* container widths */
  --w-content: 720px;
  --w-wide: 1080px;
  --w-max: 1320px;

  /* z */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* ------------------------------------------------------------
   Effects — subtle shadows, the signature RED GLOW,
   fast mechanical motion, scanlines + vignette textures
   ------------------------------------------------------------ */
:root {
  /* elevation — low, hard, on near-black */
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.6);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);

  /* the signature: electric red glow */
  --glow-red-sm: 0 0 0 1px var(--red-600), 0 0 12px var(--red-glow);
  --glow-red-md: 0 0 20px var(--red-glow);
  --glow-red-lg: 0 0 40px rgba(236,41,16,0.55);

  /* focus */
  --ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--focus-ring);

  /* motion — fast, snappy, no bounce */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur-base: 160ms;
  --dur-slow: 320ms;

  /* signature scanline / grain overlay (apply as ::after) */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  /* full-bleed vignette used behind hero imagery */
  --vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
}