/*
 * Waffle design tokens — THE colour/type/space contract (docs/02-architecture.md
 * → Theming; the language itself: docs/design/language.md). Components reference
 * these exclusively; a raw hex/rgb or a px font-size in a component is a
 * review-blocker (docs/08-code-conventions.md), enforced by
 * tools/design-tokens.test.ts. The resolved set, light and dark, is pinned by
 * tools/tokens.test.ts: a value change here is a deliberate edit of
 * that snapshot, never a drift.
 *
 * Direction A "Catalogue" (docs/design/redesign-direction-2026-09-28.md, owner
 * decision 2026-09-28): the site's paper and ink, its three families, one
 * vermilion used as ink and stroke only, and the six-hue ramp re-expressed as
 * TINTED PAPER so a placeholder is never louder than a photograph.
 *
 * Paper-and-ink neutrals are byte-identical to the site's
 * (waffle-site@9c782c6 assets/site.css lines 69–76 light, 106–111 dark):
 *   --bg = --paper, --text = --ink, --text-dim = --ink-dim,
 *   --border = --rule, --border-strong = --rule-strong, --accent-stroke = --accent,
 *   --surface-2 = --paper-2 (light) / --paper-3 (dark: the step AWAY from the
 *   card surface, which in dark mode is the lighter one).
 * --surface (the card, a shade lighter than the paper) has no site role; its
 * values are the direction's.
 *
 * Every block that redeclares a colour does so in full: the dark media block
 * and :root[data-theme='dark'] are identical, and :root[data-theme='light']
 * restores every name either of them overrides (tokens.test.ts asserts both).
 */

:root {
  /* Motion (design.md): ease-out only — never linear. Micro = hover/fades,
     component = sheets/dialogs/drawers. Unchanged by the direction. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;
  --dur-component: 240ms;
  /* Period of an infinite loop (skeleton pulses) — not a transition duration. */
  --dur-loop: 1.3s;
  /* Reading typography (feel pass): ONE measure + line-height shared by the
     editor and the reading view — mismatched measures made the mode swap
     jump sideways. */
  --measure-read: 720px;
  --lh-read: 1.65;

  /* Type — three families.
     --font-display: Bodoni Moda, ONLY at --fs-xl and above (a didone below
       that size is unreadable); the guard refuses it beside a smaller size.
     --font-body: Hanken Grotesk, every reading and control size.
     --font-head: the heading voice BELOW --fs-xl — Hanken Grotesk at the
       consumer's weight. Every existing heading consumer sits under --fs-xl
       today, so it keeps this name; slices 2–4 move the titles the direction
       sets at --fs-xl and above (folder heading, sheet and dialog titles, the
       note title) to --font-display.
     --font-mono: IBM Plex Mono for paths, properties, counts, keys, eyebrows. */
  --font-display: 'Bodoni Moda', 'Bodoni 72', 'Didot', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-head: var(--font-body);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — one modular scale for the whole app. Dense sizes clamp with
     a vw preferred value (workspace rule: rem floors and ceilings, never px);
     --fs-md is the reading size and stays static. */
  --fs-2xs: clamp(0.6875rem, 1.6vw, 0.75rem);
  --fs-xs: clamp(0.75rem, 1.8vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 2vw, 0.875rem);
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-2xl: clamp(1.625rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2.25rem, 5vw, 3.75rem);
  --lh-tight: 1.08; /* display */
  --lh-ui: 1.35;    /* chrome */
  /* Tracking: display tightens, labels (mono caps) open up. */
  --ls-tight: -0.012em;
  --ls-normal: 0;
  --ls-label: 0.06em;

  /* Spacing — a 4px grid (in rem); components never invent a gap. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Brand ramp (light): fill + ink pairs. The fills are tinted paper now —
     quiet enough that a placeholder never out-shouts a photograph; the inks
     are unchanged and read at 7.2–8.9:1 on their fills. Never text colours. */
  --ramp-lavender: #e6e2f1;    --ink-lavender: #3f3170;
  --ramp-aqua: #dbeceb;        --ink-aqua: #114e55;
  --ramp-peach: #f3e4d6;       --ink-peach: #6e3d14;
  --ramp-periwinkle: #dfe4f0;  --ink-periwinkle: #26386b;
  --ramp-mint: #e0ecd9;        --ink-mint: #1f5514;
  --ramp-blush: #f5dfdd;       --ink-blush: #6e2224;

  /* User-remappable library presentation roles. */
  --field-folder: var(--ramp-lavender);
  --field-folder-ink: var(--ink-lavender);
  --field-note: var(--ramp-peach);
  --field-note-ink: var(--ink-peach);
  --field-link: var(--ramp-aqua);
  --field-link-ink: var(--ink-aqua);
  --field-file: var(--ramp-periwinkle);
  --field-file-ink: var(--ink-periwinkle);
  --field-dash: var(--ramp-mint);
  --field-dash-ink: var(--ink-mint);

  /* Neutrals (light): paper and ink. */
  --bg: #f3efe7;
  --surface: #faf7f1;
  --surface-2: #e9e3d7;
  --border: color-mix(in srgb, #1b1815 16%, transparent);
  --border-strong: color-mix(in srgb, #1b1815 70%, transparent);
  --text: #1b1815;
  --text-dim: #5b5249;

  /* Accent — two roles, deliberately separate names.
     --accent / --accent-ink: the user-chosen FILL/INK pair (Settings → Accent
       writes them inline as var(--ramp-X)/var(--ink-X); the seed is lavender).
       About 50 consumers paint it as a background; it keeps that contract
       until slices 2–4 move each one to --accent-fill. Since the ramp became
       tinted paper it is 1.1–1.5:1 against the page, so it is a FILL ONLY:
       every outline, border and ring reads --focus or --accent-stroke instead
       (tools/design-tokens.test.ts refuses a stroke on --accent), and a
       selected state carries a --accent-stroke mark, never the fill alone.
     --accent-stroke: torii vermilion, text-safe (5.1:1 on --bg), for ink and
       strokes only — never a fill.
     --accent-fill: the selection tint, vermilion on paper at 7% so the stroke
       still reads on it at AA (4.6:1; the direction's 10% measures 4.4:1). */
  --accent: var(--ramp-lavender);
  --accent-ink: var(--ink-lavender);
  --accent-stroke: #b8361a;
  --accent-fill: color-mix(in srgb, var(--accent-stroke) 7%, var(--bg));
  --focus: var(--accent-stroke);

  /* Semantic states: fill + readable ink, derived with custom palettes. */
  --state-success: var(--ramp-mint);
  --state-success-ink: var(--ink-mint);
  --state-warning: var(--ramp-peach);
  --state-warning-ink: var(--ink-peach);
  --state-danger: var(--ramp-blush);
  --state-danger-ink: var(--ink-blush);

  /* Shape — the site's tighter radii. */
  --radius: 0.375rem;
  --radius-sm: 0.25rem;
  --radius-pill: 999rem;
  --shadow-menu-soft: 0 1px 1px rgb(27 24 21 / 6%), 0 8px 24px -8px rgb(27 24 21 / 18%);
  --shadow-menu: 0 1px 1px rgb(27 24 21 / 8%), 0 12px 32px -8px rgb(27 24 21 / 22%);
  --shadow-dialog: 0 2px 2px rgb(27 24 21 / 8%), 0 24px 64px -16px rgb(27 24 21 / 35%);
  /* The dimmed page behind a modal ceremony. */
  --scrim: rgb(27 24 21 / 18%);

  /* Aliases — names components already read that this file never defined
     (they resolved to nothing: a transparent background, a hex fallback).
     Each retires in the slice that rewrites its last consumer:
       --surface-1 → slice 3 (syncSection.css, shareSection.css) and
                     slice 4 (scan/*, IdentifyFromImage.tsx)
       --danger    → slice 4 (scan/ScanSuggestControls.tsx)
       --radius-md → slice 3 (folderTrashDialog.css) */
  --surface-1: var(--surface);
  --danger: var(--state-danger-ink);
  --radius-md: var(--radius);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ramp-lavender: #34304a;    --ink-lavender: #d9d1f2;
    --ramp-aqua: #28393a;        --ink-aqua: #c8e9ec;
    --ramp-peach: #413328;       --ink-peach: #f3dcc6;
    --ramp-periwinkle: #2f3549;  --ink-periwinkle: #d4ddf5;
    --ramp-mint: #2c3a29;        --ink-mint: #d5ecd0;
    --ramp-blush: #45302f;       --ink-blush: #f5d3d3;

    --bg: #16130f;
    --surface: #1e1a15;
    --surface-2: #2d2822;
    --border: color-mix(in srgb, #efe8dc 16%, transparent);
    --border-strong: color-mix(in srgb, #efe8dc 70%, transparent);
    --text: #efe8dc;
    --text-dim: #a89f90;
    --accent-stroke: #ff7a52;
    --accent-fill: color-mix(in srgb, var(--accent-stroke) 14%, var(--bg));
    --shadow-menu-soft: 0 1px 1px rgb(0 0 0 / 40%), 0 8px 24px -8px rgb(0 0 0 / 50%);
    --shadow-menu: 0 1px 1px rgb(0 0 0 / 40%), 0 12px 32px -8px rgb(0 0 0 / 60%);
    --shadow-dialog: 0 2px 2px rgb(0 0 0 / 40%), 0 24px 64px -16px rgb(0 0 0 / 70%);
    --scrim: rgb(0 0 0 / 45%);
  }
}

:root[data-theme='light'] {
  --ramp-lavender: #e6e2f1;    --ink-lavender: #3f3170;
  --ramp-aqua: #dbeceb;        --ink-aqua: #114e55;
  --ramp-peach: #f3e4d6;       --ink-peach: #6e3d14;
  --ramp-periwinkle: #dfe4f0;  --ink-periwinkle: #26386b;
  --ramp-mint: #e0ecd9;        --ink-mint: #1f5514;
  --ramp-blush: #f5dfdd;       --ink-blush: #6e2224;

  --bg: #f3efe7;
  --surface: #faf7f1;
  --surface-2: #e9e3d7;
  --border: color-mix(in srgb, #1b1815 16%, transparent);
  --border-strong: color-mix(in srgb, #1b1815 70%, transparent);
  --text: #1b1815;
  --text-dim: #5b5249;
  --accent-stroke: #b8361a;
  --accent-fill: color-mix(in srgb, var(--accent-stroke) 7%, var(--bg));
  --shadow-menu-soft: 0 1px 1px rgb(27 24 21 / 6%), 0 8px 24px -8px rgb(27 24 21 / 18%);
  --shadow-menu: 0 1px 1px rgb(27 24 21 / 8%), 0 12px 32px -8px rgb(27 24 21 / 22%);
  --shadow-dialog: 0 2px 2px rgb(27 24 21 / 8%), 0 24px 64px -16px rgb(27 24 21 / 35%);
  --scrim: rgb(27 24 21 / 18%);
}

:root[data-theme='dark'] {
  --ramp-lavender: #34304a;    --ink-lavender: #d9d1f2;
  --ramp-aqua: #28393a;        --ink-aqua: #c8e9ec;
  --ramp-peach: #413328;       --ink-peach: #f3dcc6;
  --ramp-periwinkle: #2f3549;  --ink-periwinkle: #d4ddf5;
  --ramp-mint: #2c3a29;        --ink-mint: #d5ecd0;
  --ramp-blush: #45302f;       --ink-blush: #f5d3d3;

  --bg: #16130f;
  --surface: #1e1a15;
  --surface-2: #2d2822;
  --border: color-mix(in srgb, #efe8dc 16%, transparent);
  --border-strong: color-mix(in srgb, #efe8dc 70%, transparent);
  --text: #efe8dc;
  --text-dim: #a89f90;
  --accent-stroke: #ff7a52;
  --accent-fill: color-mix(in srgb, var(--accent-stroke) 14%, var(--bg));
  --shadow-menu-soft: 0 1px 1px rgb(0 0 0 / 40%), 0 8px 24px -8px rgb(0 0 0 / 50%);
  --shadow-menu: 0 1px 1px rgb(0 0 0 / 40%), 0 12px 32px -8px rgb(0 0 0 / 60%);
  --shadow-dialog: 0 2px 2px rgb(0 0 0 / 40%), 0 24px 64px -16px rgb(0 0 0 / 70%);
  --scrim: rgb(0 0 0 / 45%);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
}

button {
  font-family: var(--font-body);
}

/* Links are ink-safe vermilion, not the user agent's blue. */
a {
  color: var(--accent-stroke);
}