/* ==========================================================================
   Design tokens — the single source of truth for the site's look.
   Rules for using them live in STYLE_GUIDE.md; the visual specimen is
   style-guide.html. Never hard-code a color, size, or space in page CSS.

   Themes: light is the default for everyone, whatever their OS prefers.
   Dark applies only when <html data-theme="dark">, which the theme switch
   next to the name sets and remembers (js/main.js).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Color: raw values ---------- */
  --white: #ffffff;
  --paper: #f4f3ef;          /* light panels; text on dark */
  --paper-2: #e9e8e3;        /* light image wells, tag fills */
  --ink: #111111;            /* light text; dark panels */
  --ink-1: #1d1d1d;          /* dark image wells */
  --ink-2: #6b6b6b;          /* secondary text on paper (4.9:1) */
  --ink-3: #a3a3a3;          /* secondary text on ink (7.9:1); dark frame */
  --rule-soft: #dcdbd6;      /* quiet dividers on paper */
  --rule-invert: #333333;    /* quiet dividers on ink */
  --scrim: rgba(17, 17, 17, 0.92); /* lightbox backdrop (ink at 92%) */

  /* Scarlet: the one accent. Pink-leaning red — friendly, not alarm-red */
  --scarlet: #eb1a4e;        /* marks, dots, display type >= 24px */
  --scarlet-ink: #d91344;    /* small red text and link hover (AA on paper) */
  --scarlet-tint: #fde8ed;   /* highlight backgrounds, text selection */
  --scarlet-light: #ff4d75;  /* small red text on ink (5.9:1, AA) — dark theme */

  /* ---------- Color: semantic (light) — pages use these ---------- */
  --frame: var(--ink);           /* the 2px lines between panels */
  --bg: var(--paper);            /* panel background */
  --surface: var(--paper-2);     /* image wells and tag fills inside a panel */
  --skeleton-peak: color-mix(in srgb, var(--surface), var(--fg) 6%);   /* loading wireframe pulse */
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-faint: var(--ink-3);      /* decorative only — never readable text */
  --border: var(--rule-soft);
  --border-strong: var(--ink);
  --accent: var(--scarlet);
  --accent-text: var(--scarlet-ink);
  --accent-bg: var(--scarlet-tint);

  /* ---------- Type ---------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;     /* name, headings */
  --font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;        /* body */
  --font-head: 'Archivo Black', 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* nav, panel heads, footer */
  --font-label: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; /* labels, tags, meta */

  /* Scale — fluid between 375px and 1440px viewports.
     The name (.t-name) has no fixed size: it scales to fill its panel. */
  --text-h1: clamp(2.25rem, 1.85rem + 1.7vw, 3.375rem);  /* 36 → 54 */
  --text-h2: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);      /* 24 → 32 */
  --text-impact: clamp(2rem, 1.82rem + 0.75vw, 2.5rem);  /* 32 → 40 */
  --text-h3: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);   /* 20 → 24 */
  --text-head: clamp(0.875rem, 0.74rem + 0.56vw, 1.25rem); /* 14 → 20, Archivo Black caps */
  --text-body: 1rem;        /* 16 */
  --text-small: 0.875rem;   /* 14 */
  --text-tag: 1rem;         /* 16 — tags + card meta, Archivo Narrow caps */
  --text-label: 0.75rem;    /* 12 — labels, Archivo Narrow caps */

  --leading-name: 0.8;
  --leading-head: 1;
  --leading-heading: 1.05;
  --leading-h3: 1.3;
  --leading-body: 1.55;
  --leading-meta: 1.45;

  --tracking-name: -0.05em;
  --tracking-head: -0.05em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.01em;
  --tracking-body: 0.005em;
  --tracking-label: 0.06em;

  /* ---------- Space (4px base) ---------- */
  --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: 100px;
  --space-10: 128px;

  /* ---------- Layout: panels on a 12-column grid ---------- */
  --frame-gap: 2px;                      /* line between panels, and around the page */
  --panel-pad: 12px;                     /* inside every panel = grid margin */
  --panel-pad-end: var(--space-9);       /* bottom of content panels; head → content gap */
  --panel-radius: 20px;
  --columns: 12;
  --gutter: 12px;
  --measure: 62ch;
  --switch-w: 48px;                      /* theme switch width (desktop) */
  --nav-h: 48px;                         /* sticky nav panel, for scroll offsets */

  /* ---------- Shape ---------- */
  --radius-0: 0;           /* images, cards, blocks: always square */
  --radius-media: 12px;    /* device frames */
  --radius-pill: 999px;    /* tags, buttons, the switch */
  --hairline: 1px;

  /* ---------- Icons ---------- */
  /* External-link arrow (↗), drawn heavy to sit with Archivo Black caps */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h17M12 4.5l7.5 7.5-7.5 7.5' fill='none' stroke='%23000' stroke-width='4.5'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12H5M12 4.5 4.5 12l7.5 7.5' fill='none' stroke='%23000' stroke-width='4.5'/%3E%3C/svg%3E");
  --icon-arrow-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 18 6M8 5h11v11' fill='none' stroke='%23000' stroke-width='5'/%3E%3C/svg%3E");

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
}

/* ---------- Dark theme ----------
   Same structure, inverted: ink panels on a gray frame, paper text. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --frame: var(--ink-3);
  --bg: var(--ink);
  --surface: var(--ink-1);
  --fg: var(--paper);
  --fg-muted: var(--ink-3);
  --fg-faint: var(--ink-2);
  --border: var(--rule-invert);
  --border-strong: var(--paper);
  --accent-text: var(--scarlet-light);
  --accent-bg: var(--scarlet);
}

/* ---------- Client palettes (case studies only) ----------
   A case study may show its client's brand colors, scoped to that page's
   <body> class. Components read --client-* and fall back to site tokens,
   so pages without a palette look like the rest of the site.
   Client panels keep their brand colors in both themes, so text placed on
   them reads --client-on-panel instead of --fg.
   Scarlet stays the site's own mark and never mixes into a client palette. */
.cs-client-furi {
  --client-panel: #e4e4e4;     /* FURI gray: block and card panels (reads against #f4f3ef paper) */
  --client-on-panel: var(--ink);
  --client-on-panel-muted: #5c5c5c; /* secondary text on the FURI gray (5.3:1) */
  --client-hi: #edff00;        /* FURI yellow: number tags, text on purple */
  --client-hi-ink: #4f004d;    /* text on yellow tags (9.9:1) */
  --client-deep: #4f004d;      /* FURI purple: media frames, feature card */
  --client-on-deep: #ffffff;   /* body text on purple */
  --client-media-radius: 8px;  /* screenshots inside client frames */
}