/* Design tokens: "Blueprint notebook".
   Every color, size and timing used by the site lives here.
   Light theme first; the dark theme below re-maps the same names. */

:root {
  color-scheme: light dark;

  /* Brand (from behindworks.com) */
  --brand-ink: #15233b;
  --brand-violet: #6d28d9;
  --brand-violet-deep: #4a1a82;
  --brand-violet-bright: #8b5cf6;
  --brand-electric: #22d3ee;
  --brand-gold: #f4b740;

  /* Surfaces */
  --paper: #fafbfe;          /* page background */
  --sheet: #ffffff;          /* cards, panels */
  --sheet-sunk: #f2f5fa;     /* wells: code, output */
  --line: #e3e8f1;           /* hairlines (mist) */
  --line-strong: #c5cedd;
  --grid-minor: rgb(37 99 235 / 0.055);
  --grid-major: rgb(37 99 235 / 0.09);

  /* Text */
  --ink: #15233b;
  --ink-soft: #4c5a72;       /* slate: 6.6:1 on paper */
  --ink-faint: #5f6c84;      /* still AA on paper and sheet */
  --on-accent: #ffffff;

  /* Meaning colors */
  --violet: #6d28d9;         /* "you are here", progress, primary actions */
  --violet-hover: #5b21b6;
  --violet-text: #5b21b6;
  --violet-tint: #f4effd;
  --violet-line: #d9cbf7;

  --ai: #0e7490;             /* AI / model parts: text-safe cyan */
  --ai-stroke: #0891b2;
  --ai-tint: #e3f8fc;

  --key: #8a5a00;            /* key ideas: text-safe gold */
  --key-stroke: #d99a1b;
  --key-tint: #fff5dc;

  --data: #8a5a00;
  --data-stroke: #d99a1b;
  --data-tint: #fff5dc;

  --user: #5b21b6;
  --user-stroke: #7c3aed;
  --user-tint: #f4effd;

  --app: #15233b;
  --app-stroke: #4c5a72;
  --app-tint: #eef2f8;

  --ok: #166534;
  --ok-tint: #e8f6ec;
  --bad: #b42318;
  --bad-tint: #fdecea;
  --warn: #9a3412;
  --warn-tint: #fff1e6;

  --focus: #6d28d9;

  /* Type */
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --step--2: clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.42rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.05rem, 1.5rem + 2.7vw, 3.7rem);
  --step-5: clamp(2.4rem, 1.5rem + 4.4vw, 5.2rem);

  /* Space (fluid) */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.1vw, 0.56rem);
  --space-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --space-s: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --space-m: clamp(1.5rem, 1.42rem + 0.4vw, 1.75rem);
  --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7rem + 1.5vw, 4rem);
  --space-2xl: clamp(4rem, 3.4rem + 3vw, 6rem);
  --space-3xl: clamp(5rem, 4rem + 5vw, 9rem);

  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --wrap: 84rem;
  --measure: 70ch;

  /* Shape and depth */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-s: 0 1px 0 rgb(21 35 59 / 0.06), 0 1px 3px rgb(21 35 59 / 0.06);
  --shadow-m: 0 1px 0 rgb(21 35 59 / 0.05), 0 8px 24px -12px rgb(21 35 59 / 0.22);
  --shadow-l: 0 2px 0 rgb(21 35 59 / 0.05), 0 24px 48px -24px rgb(21 35 59 / 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  /* Layers */
  --z-header: 20;
  --z-overlay: 40;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b1422;
    --sheet: #111d31;
    --sheet-sunk: #0d1829;
    --line: #22314a;
    --line-strong: #344766;
    --grid-minor: rgb(125 211 252 / 0.04);
    --grid-major: rgb(125 211 252 / 0.07);

    --ink: #e8edf7;
    --ink-soft: #b2bdd1;
    --ink-faint: #97a3ba;
    --on-accent: #ffffff;

    --violet: #7c3aed;
    --violet-hover: #8b5cf6;
    --violet-text: #c4b5fd;
    --violet-tint: #1e1838;
    --violet-line: #4c3a86;

    --ai: #67e8f9;
    --ai-stroke: #22d3ee;
    --ai-tint: #0b2a35;

    --key: #f8c96a;
    --key-stroke: #f4b740;
    --key-tint: #2c230f;

    --data: #f8c96a;
    --data-stroke: #f4b740;
    --data-tint: #2c230f;

    --user: #c4b5fd;
    --user-stroke: #a78bfa;
    --user-tint: #1e1838;

    --app: #e8edf7;
    --app-stroke: #8e9bb4;
    --app-tint: #17243a;

    --ok: #4ade80;
    --ok-tint: #0f2a1b;
    --bad: #fca5a5;
    --bad-tint: #33161a;
    --warn: #fdba74;
    --warn-tint: #2f1d0e;

    --focus: #c4b5fd;

    --shadow-s: 0 1px 0 rgb(0 0 0 / 0.3);
    --shadow-m: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -14px rgb(0 0 0 / 0.7);
    --shadow-l: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 30px 60px -28px rgb(0 0 0 / 0.85);
  }
}