/* =====================================================================
   GrowthRouter design tokens
   One source for colour, type, space, radius, shadow and motion.
   Structure follows the Firecrawl pattern: a brand colour as an alpha
   scale, an ink alpha scale, then semantic layers that components use.
   Components should only reference the semantic layer (section 3+).
   Brand values come from thoufeekxlabs.com (src/app/globals.css).
   ===================================================================== */
:root {
  /* ---------- 1. Primitives: brand ---------- */
  /* Signal: thoufeekxlabs lime, live rgb(213 255 0). Readable as text on ink (15:1). */
  --signal-4:   #d5ff000a;
  --signal-8:   #d5ff0014;
  --signal-12:  #d5ff001f;
  --signal-16:  #d5ff0029;
  --signal-24:  #d5ff003d;
  --signal-40:  #d5ff0066;
  --signal-56:  #d5ff008f;
  --signal-100: #d5ff00ff;
  --signal-hover: #ccf500;
  --signal-edge:  #b8de00;   /* 1px border on lime fills */
  --signal-tint:  #f3ffbf;   /* solid pale lime for chips */
  --signal-ink:   #141a00;   /* text on lime, 17:1 */

  /* Moss: text-safe greens derived from the signal hue */
  --moss-300: #c6e600;
  --moss-500: #6b9a00;
  --moss-600: #4f7300;       /* accent text on paper, 5.6:1 */
  --moss-700: #3b5600;

  /* Ink: thoufeekxlabs background #111 and its alpha scale */
  --ink-100: #111111ff;
  --ink-88:  #111111e0;
  --ink-72:  #111111b8;
  --ink-56:  #1111118f;
  --ink-40:  #11111166;
  --ink-24:  #1111113d;
  --ink-16:  #11111129;
  --ink-12:  #1111111f;
  --ink-8:   #11111114;
  --ink-4:   #1111110a;

  /* Neutrals (warm, very slightly yellow like the brand off-white #f2f1ef) */
  --paper-0:   #ffffff;
  --paper-50:  #fbfbf9;
  --paper-100: #f9f9f7;
  --stone-200: #ededE8;
  --stone-250: #e7e7e1;
  --stone-300: #d9d9d2;
  --stone-500: #9b9b91;
  --stone-600: #66665e;
  --stone-900: #191917;

  /* Dark surface set (used inside the campaign trace and code-on-dark) */
  --night-0:    #111111;
  --night-line: #2d2d2a;
  --night-text: #f3f3ef;
  --night-muted:#acaca0;
  --night-dim:  #75756c;

  /* Supporting accents (illustration + syntax only) */
  --accent-coral:  #f4915f;  /* thoufeekxlabs coral */
  --accent-gold:   #f2c94c;  /* thoufeekxlabs gold */
  --accent-blue:   #3f5bd9;
  --accent-violet: #7b3fd1;
  --accent-amber:  #8a5a00;
  --accent-error:  #b4441a;

  /* ---------- 2. Primitives: type, space, shape, motion ---------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (rem). Display sizes are fluid. */
  --text-label: 0.6875rem;  /* 11px  gutter tags, code captions */
  --text-micro: 0.75rem;    /* 12px  counters, chips */
  --text-xs:    0.8125rem;  /* 13px  notes, fine print */
  --text-sm:    0.9063rem;  /* 14.5px secondary copy */
  --text-base:  1rem;       /* 16px  body */
  --text-md:    1.0625rem;  /* 17px  card titles, FAQ */
  --text-lg:    1.1875rem;  /* 19px  lede */
  --text-xl:    1.5rem;     /* 24px  case titles */
  --text-h2:    clamp(1.85rem, 3.6vw, 2.9rem);
  --text-h1:    clamp(2rem, 4.6vw, 3.6rem);
  --text-hero:  clamp(2.5rem, 6.4vw, 4.6rem);

  --leading-tight: 1.04;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --leading-code:  1.8;

  --tracking-hero: -0.04em;
  --tracking-head: -0.035em;
  --tracking-title:-0.02em;

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

  /* Space (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-28: 7rem;

  /* Layout */
  --frame-max: 1120px;
  --frame-pad: clamp(1.25rem, 4vw, 2.5rem);
  --header-h:  64px;
  --grid-cell: 74px;    /* hero background grid */

  /* Radius: small for controls, larger for panels */
  --radius-xs: 6px;   /* chips, tags */
  --radius-sm: 8px;   /* small buttons, step numbers */
  --radius-md: 10px;  /* buttons */
  --radius-lg: 14px;  /* inputs, code panels */
  --radius-xl: 16px;  /* cards, trace */
  --radius-full: 999px;

  /* Shadow */
  --shadow-hairline: 0 1px 2px var(--ink-4);
  --shadow-input:    0 10px 30px -12px var(--ink-12), 0 1px 2px var(--ink-4);
  --shadow-card:     0 20px 40px -24px var(--ink-16);
  --shadow-float:    0 30px 60px -30px var(--ink-40);
  --ring-focus:      0 0 0 4px var(--signal-56);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ---------- 3. Semantic layer (components use these) ----------
     Dark, like thoufeekxlabs.com: ink background, lime signal. */
  --background-base:    var(--night-0);
  --background-lighter: #141414;
  --surface:            #181818;
  --surface-raised:     #1e1e1d;
  --surface-dark:       #0b0b0b;

  --border-faint: #1f1f1d;
  --border-muted: var(--night-line);
  --border-loud:  #3b3b37;

  --text-default: #f4f4f0;
  --text-muted:   var(--night-muted);
  --text-faint:   var(--night-dim);
  --text-accent:  var(--signal-100);
  --text-on-signal: var(--signal-ink);
  --text-error:   var(--accent-coral);

  --action-bg:     var(--signal-100);
  --action-hover:  #e2ff4d;
  --action-edge:   #a9cc00;
  --action-text:   var(--signal-ink);

  --illustration-faint:   #1c1c1a;
  --illustration-muted:   var(--night-line);
  --illustration-default: #46463f;
  --illustration-accent:  var(--signal-100);

  --code-comment: #6b6b62;
  --code-tag:     #9fb4ff;
  --code-attr:    #e7c58a;
  --code-string:  var(--signal-100);
  --code-fn:      #c9e6ff;
  --code-text:    #d8d8d0;

  --header-bg:    rgb(17 17 17 / .82);
  --fade-clear:   rgb(17 17 17 / 0);
  --canvas-dot:   #1d1d1b;
  --canvas-path:  #3d3d37;
  --canvas-particle: #f4f4f0;
  --canvas-signup-path: #64780f;
  --ascii-ink:    rgb(244 244 240 / .24);
  --ascii-hot:    #d5ff00;
  --mark-muted:   #55554f;
  color-scheme: dark;
}

/* ---------- 4. Light theme: same structure, paper background ----------
   Lime stays a fill; accent headings get a lime marker under ink text. */
:root[data-theme="light"] {
  --background-base:    var(--paper-100);
  --background-lighter: var(--paper-50);
  --surface:            var(--paper-0);
  --surface-raised:     #f3f3ee;
  --surface-dark:       #0b0b0b;

  --border-faint: #ededE8;
  --border-muted: var(--stone-250);
  --border-loud:  var(--stone-300);

  --text-default: var(--stone-900);
  --text-muted:   var(--stone-600);
  --text-faint:   #8a8a80;
  --text-accent:  var(--stone-900);

  --action-edge:  #a9cc00;

  --header-bg:    rgb(249 249 247 / .86);
  --fade-clear:   rgb(249 249 247 / 0);
  --canvas-dot:   #e4e4dd;
  --canvas-path:  #c9c9c0;
  --canvas-particle: #191917;
  --canvas-signup-path: #a9cc00;
  --ascii-ink:    rgb(25 25 23 / .16);
  --ascii-hot:    #7a9a00;
  --mark-muted:   #b9b9b0;
  color-scheme: light;
}