/* ==========================================================================
   FYC — Construct design tokens
   Single source of truth for colour, type, spacing, motion. Components in
   main.css must reference these variables rather than literal values.
   ========================================================================== */

:root{
  /* colour — dark-first, this is the primary environment */
  --graphite:#0B0F0E;
  --slate:#121917;
  --slate-2:#1A2321;
  --slate-3:#232E2B;
  --line:rgba(244,247,245,.09);
  --line-strong:rgba(244,247,245,.18);

  --mint:#00F0B2;
  --mint-dim:#0A5C46;
  --teal:#10C79A;

  --mist:#8B9C97;
  --mist-dim:#5C6D68;
  --paper:#F4F7F5;

  --text-primary:var(--paper);
  --text-secondary:var(--mist);
  --text-tertiary:var(--mist-dim);
  --surface-0:var(--graphite);
  --surface-1:var(--slate);
  --surface-2:var(--slate-2);
  --surface-3:var(--slate-3);
  --accent:var(--mint);
  --accent-strong:#00D89E;
  --accent-ink:var(--graphite);
  --danger:#E8A08A;

  /* light treatment — legal / printable pages only */
  --lt-bg:#F4F7F5;
  --lt-surface:#FFFFFF;
  --lt-border:#DFE6E2;
  --lt-text:#0B0F0E;
  --lt-text-secondary:#4B5854;
  --lt-accent:#0A9A78;

  /* type */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --fs-display:clamp(2.75rem,3.2rem + 3.4vw,7rem);
  --fs-h1:clamp(2.25rem,1.9rem + 1.6vw,3.4rem);
  --fs-h2:clamp(1.7rem,1.5rem + .9vw,2.35rem);
  --fs-h3:clamp(1.25rem,1.15rem + .35vw,1.5rem);
  --fs-body:1rem;
  --fs-body-lg:1.125rem;
  --fs-small:.875rem;
  --fs-caption:.75rem;
  --fs-label:.6875rem;

  /* spacing scale (8px base) */
  --sp-1:.5rem;
  --sp-2:.75rem;
  --sp-3:1rem;
  --sp-4:1.5rem;
  --sp-5:2rem;
  --sp-6:3rem;
  --sp-7:4.5rem;
  --sp-8:6rem;
  --sp-9:8rem;

  /* radii */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:22px;
  --r-pill:999px;

  /* shadow — used sparingly, mostly for lifted modals/cards */
  --shadow-1:0 1px 0 rgba(0,0,0,.4);
  --shadow-2:0 12px 40px rgba(0,0,0,.45);
  --glow-mint:0 0 0 1px rgba(0,240,178,.25), 0 0 32px rgba(0,240,178,.12);

  /* motion */
  --ease-construct:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.15s;
  --dur-base:.3s;
  --dur-slow:.55s;

  /* layout */
  --container:1240px;
  --container-narrow:820px;
  --gutter:20px;
  --header-h:72px;

  /* z-index layers */
  --z-header:100;
  --z-overlay:200;
  --z-modal:300;
  --z-toast:400;
}

@media (min-width:640px){
  :root{ --gutter:40px; }
}