/*
  Folio design system 1.0.0 tokens.
  Every custom property starts with --fo-. Light is the default; dark follows the visitor's system
  setting unless <html data-theme="light|dark"> overrides it. Accent presets switch with
  <html data-accent="ink-blue|forest"> and change accent and button tokens only.
  Text pairs target 7:1 and never fall below 4.5:1. Measured values live in DESIGN.md section 4.
*/

:root {
  color-scheme: light;

  /* Paper and ink */
  --fo-paper: #f7f3ec;            /* page: newsprint ivory, warm but not yellow */
  --fo-paper-2: #efe8dc;          /* tint band, table heads, skeletons, wells */
  --fo-surface: #fcfaf6;          /* inputs, dialogs, toasts: a sheet laid on the page */
  --fo-ink: #1d1915;              /* headlines, strong labels, input text */
  --fo-body: #2c2621;             /* running text */
  --fo-muted: #4f463d;            /* deks, meta, captions, sidenotes */
  --fo-rule: #dcd2c4;             /* hairline rules: the structure of every page */
  --fo-rule-strong: #b8aa97;      /* ornament rules and figure frames (decorative) */
  --fo-control: #8b7e6f;          /* borders that mark a control: inputs, checkboxes, switches */

  /* Oxblood accent: links, drop caps, note markers, the primary button */
  --fo-accent: #7f1d26;
  --fo-link: #7f1d26;
  --fo-accent-soft: #f3e2dc;
  --fo-accent-ink: #fcf8f1;
  --fo-btn: #7f1d26;
  --fo-btn-hover: #5f141b;
  --fo-btn-ink: #fcf8f1;
  --fo-focus: #7f1d26;

  /* Preset previews for the accent switcher (fixed, not themed) */
  --fo-swatch-oxblood: #7f1d26;
  --fo-swatch-ink-blue: #1f3d63;
  --fo-swatch-forest: #22513a;

  /* Status */
  --fo-ok: #2b6339;
  --fo-ok-soft: #e3eedf;
  --fo-warn: #7d4e06;
  --fo-warn-soft: #f5e8cf;
  --fo-danger: #b0261c;
  --fo-danger-soft: #f8e2dc;
  --fo-overlay: rgba(29, 25, 21, 0.48);

  /* Data viz: categorical (3:1 or better on paper, paper-2 and surface; lightness alternates) */
  --fo-viz-1: #7f1d26;
  --fo-viz-2: #b5781a;
  --fo-viz-3: #2c5a88;
  --fo-viz-4: #c0603a;
  --fo-viz-5: #33664a;
  --fo-viz-6: #6b7682;
  /* Sequential (oxblood, light to dark) and diverging (blue, paper, oxblood) */
  --fo-seq-1: #f2ddd8;
  --fo-seq-2: #e3aaa6;
  --fo-seq-3: #c96f73;
  --fo-seq-4: #9b3640;
  --fo-seq-5: #64141c;
  --fo-div-1: #2c5a88;
  --fo-div-2: #8fb0d0;
  --fo-div-3: #e8e1d5;
  --fo-div-4: #dc9b95;
  --fo-div-5: #7f1d26;

  /* Type faces: Newsreader for reading and headlines, Hanken Grotesk for the interface */
  --fo-font-text: "Newsreader", ui-serif, serif;
  --fo-font-display: "Newsreader", ui-serif, serif;
  --fo-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fo-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;

  /* Type ladder */
  --fo-fs-display: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);    /* 40 to 72px: h1, nameplate */
  --fo-fs-title: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);        /* 32 to 44px: h2 */
  --fo-fs-headline: clamp(1.5rem, 1.34rem + 0.66vw, 1.875rem); /* 24 to 30px: h3, lead card */
  --fo-fs-subhead: 1.3125rem;                                 /* 21px: card titles, h4 */
  --fo-fs-lede: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);     /* 20 to 24px: deks */
  --fo-fs-read: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);    /* 18 to 20px: article text */
  --fo-fs-body: 1.125rem;                                     /* 18px: running text elsewhere */
  --fo-fs-note: 1rem;                                         /* 16px: sidenotes, card deks */
  --fo-fs-ui: 0.9375rem;                                      /* 15px: nav, buttons, labels */
  --fo-fs-meta: 0.875rem;                                     /* 14px: bylines, captions, table text */
  --fo-fs-small: 0.8125rem;                                   /* 13px: badges, small caps labels */

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

  --fo-lh-display: 1.04;
  --fo-lh-title: 1.1;
  --fo-lh-heading: 1.2;
  --fo-lh-read: 1.65;
  --fo-lh-body: 1.6;
  --fo-lh-ui: 1.4;

  --fo-track-display: -0.02em;
  --fo-track-title: -0.012em;
  --fo-track-caps: 0.06em;

  --fo-opsz-display: 72;
  --fo-opsz-text: 14;

  /* Space: 4px base */
  --fo-space-1: 4px;
  --fo-space-2: 8px;
  --fo-space-3: 12px;
  --fo-space-4: 16px;
  --fo-space-5: 24px;
  --fo-space-6: 32px;
  --fo-space-7: 48px;
  --fo-space-8: 64px;
  --fo-space-9: 96px;
  --fo-space-10: 128px;
  --fo-section-pad: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);

  /* The page: a centered reading column with a wing on each side */
  --fo-measure: 35rem;            /* 560px: about 66 characters of Newsreader at 20px */
  --fo-wing: 20rem;               /* 320px: hang (start) and margin (end) */
  --fo-margin-gap: 3rem;          /* 48px between the column and a note */
  --fo-page: 75rem;               /* 1200px = wing + measure + wing */
  --fo-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);
  --fo-nav-h: 64px;

  /* Shape: almost no radius, rules do the structure */
  --fo-radius-control: 2px;
  --fo-radius-btn: 2px;
  --fo-radius-input: 2px;
  --fo-radius-tag: 2px;
  --fo-radius-card: 0px;
  --fo-radius-figure: 0px;
  --fo-line-hair: 1px;
  --fo-line-heavy: 3px;

  /* Elevation: only for things that float over the page */
  --fo-shadow-float: 0 1px 0 rgba(29, 25, 21, 0.06), 0 18px 40px -18px rgba(29, 25, 21, 0.34);

  /* Motion */
  --fo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fo-dur-fast: 140ms;
  --fo-dur: 220ms;
  --fo-dur-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fo-paper: #1c1916;
    --fo-paper-2: #25211d;
    --fo-surface: #221e1a;
    --fo-ink: #f4ece0;
    --fo-body: #e0d6c7;
    --fo-muted: #c2b6a6;
    --fo-rule: #3b342d;
    --fo-rule-strong: #5a5046;
    --fo-control: #877b6d;
    --fo-accent: #ec8c93;
    --fo-link: #f2a3a8;
    --fo-accent-soft: #3a2326;
    --fo-accent-ink: #1c1916;
    --fo-btn: #ec8c93;
    --fo-btn-hover: #f4adb1;
    --fo-btn-ink: #1c1916;
    --fo-focus: #f2a3a8;
    --fo-ok: #8fd0a0;
    --fo-ok-soft: #1d2b20;
    --fo-warn: #e9b765;
    --fo-warn-soft: #2f2516;
    --fo-danger: #ff8f80;
    --fo-danger-soft: #3a1f1b;
    --fo-overlay: rgba(8, 7, 6, 0.66);
    --fo-viz-1: #ee8e96;
    --fo-viz-2: #f0c56f;
    --fo-viz-3: #5f93cc;
    --fo-viz-4: #f0a27c;
    --fo-viz-5: #4f9a6e;
    --fo-viz-6: #c3ccd5;
    --fo-seq-1: #3a2226;
    --fo-seq-2: #6b3138;
    --fo-seq-3: #a24a54;
    --fo-seq-4: #d9737c;
    --fo-seq-5: #f5b3b8;
    --fo-div-1: #86b3e3;
    --fo-div-2: #46698f;
    --fo-div-3: #3e3832;
    --fo-div-4: #9c4c55;
    --fo-div-5: #f0939a;
    --fo-shadow-float: 0 1px 0 rgba(0, 0, 0, 0.3), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fo-paper: #1c1916;
  --fo-paper-2: #25211d;
  --fo-surface: #221e1a;
  --fo-ink: #f4ece0;
  --fo-body: #e0d6c7;
  --fo-muted: #c2b6a6;
  --fo-rule: #3b342d;
  --fo-rule-strong: #5a5046;
  --fo-control: #877b6d;
  --fo-accent: #ec8c93;
  --fo-link: #f2a3a8;
  --fo-accent-soft: #3a2326;
  --fo-accent-ink: #1c1916;
  --fo-btn: #ec8c93;
  --fo-btn-hover: #f4adb1;
  --fo-btn-ink: #1c1916;
  --fo-focus: #f2a3a8;
  --fo-ok: #8fd0a0;
  --fo-ok-soft: #1d2b20;
  --fo-warn: #e9b765;
  --fo-warn-soft: #2f2516;
  --fo-danger: #ff8f80;
  --fo-danger-soft: #3a1f1b;
  --fo-overlay: rgba(8, 7, 6, 0.66);
  --fo-viz-1: #ee8e96;
  --fo-viz-2: #f0c56f;
  --fo-viz-3: #5f93cc;
  --fo-viz-4: #f0a27c;
  --fo-viz-5: #4f9a6e;
  --fo-viz-6: #c3ccd5;
  --fo-seq-1: #3a2226;
  --fo-seq-2: #6b3138;
  --fo-seq-3: #a24a54;
  --fo-seq-4: #d9737c;
  --fo-seq-5: #f5b3b8;
  --fo-div-1: #86b3e3;
  --fo-div-2: #46698f;
  --fo-div-3: #3e3832;
  --fo-div-4: #9c4c55;
  --fo-div-5: #f0939a;
  --fo-shadow-float: 0 1px 0 rgba(0, 0, 0, 0.3), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
}

/* Accent preset: ink-blue (a deep navy for links, markers and the primary button) */
:root[data-accent="ink-blue"] {
  --fo-accent: #1f3d63;
  --fo-link: #1f3d63;
  --fo-accent-soft: #e2e7ee;
  --fo-accent-ink: #fcf8f1;
  --fo-btn: #1f3d63;
  --fo-btn-hover: #162d4a;
  --fo-btn-ink: #fcf8f1;
  --fo-focus: #1f3d63;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="ink-blue"]:not([data-theme="light"]) {
    --fo-accent: #8fb2e0;
    --fo-link: #a9c5ec;
    --fo-accent-soft: #1f2834;
    --fo-accent-ink: #1c1916;
    --fo-btn: #8fb2e0;
    --fo-btn-hover: #b3cdef;
    --fo-btn-ink: #1c1916;
    --fo-focus: #a9c5ec;
  }
}

:root[data-accent="ink-blue"][data-theme="dark"] {
  --fo-accent: #8fb2e0;
  --fo-link: #a9c5ec;
  --fo-accent-soft: #1f2834;
  --fo-accent-ink: #1c1916;
  --fo-btn: #8fb2e0;
  --fo-btn-hover: #b3cdef;
  --fo-btn-ink: #1c1916;
  --fo-focus: #a9c5ec;
}

/* Accent preset: forest (a deep green for links, markers and the primary button) */
:root[data-accent="forest"] {
  --fo-accent: #22513a;
  --fo-link: #22513a;
  --fo-accent-soft: #dfe9e0;
  --fo-accent-ink: #fcf8f1;
  --fo-btn: #22513a;
  --fo-btn-hover: #173a29;
  --fo-btn-ink: #fcf8f1;
  --fo-focus: #22513a;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="forest"]:not([data-theme="light"]) {
    --fo-accent: #86c9a2;
    --fo-link: #a2d8b8;
    --fo-accent-soft: #1c2a22;
    --fo-accent-ink: #1c1916;
    --fo-btn: #86c9a2;
    --fo-btn-hover: #a6dcbd;
    --fo-btn-ink: #1c1916;
    --fo-focus: #a2d8b8;
  }
}

:root[data-accent="forest"][data-theme="dark"] {
  --fo-accent: #86c9a2;
  --fo-link: #a2d8b8;
  --fo-accent-soft: #1c2a22;
  --fo-accent-ink: #1c1916;
  --fo-btn: #86c9a2;
  --fo-btn-hover: #a6dcbd;
  --fo-btn-ink: #1c1916;
  --fo-focus: #a2d8b8;
}