/* Design tokens — extracted from design.md (Colors, Typography, Spacing). Do not hardcode values elsewhere; add new tokens here first. */

:root {
  /* Colors */
  --color-bg: #fafaf7;
  --color-bg-band: #f3f2ed;
  --color-bg-placeholder: #d9d9d9;
  --color-placeholder-text: #000;   /* label on the placeholder block */
  --color-text-primary: #171717;
  --color-text-secondary: #5f5f5b;
  --color-border: #e5e5e5;
  --color-accent: #23b5f8;
  --color-accent-bg: #ecf8ff;
  --color-annotation: #d1d1d1;

  /* Outcome states — first semantic (non-neutral) pair in the system. Used as 2px borders on
     the grading diagram's pass/fail branches. See design.md: Colors. */
  --color-status-pass: #cbe6be;
  --color-status-fail: #f99e89;

  /* DLP flow diagram connectors (case study 3): the allowed and blocked paths. See design.md: Colors. */
  --color-flow-allowed: #05902d;
  --color-flow-blocked: #e06c6c;

  /* Fonts (not explicit tokens in design.md, added for convenience) */
  --font-sans: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;

  /* Line height — Figma sets every text style in this frame to "auto"/normal, which for both
     DM Sans and DM Mono computes to exactly 1.3125. */
  --leading-normal: 1.3125;

  /* Layout — 1280px of content plus an 80px page margin each side = 1440px canvas. */
  --content-max-width: 1280px;
  /* Running-text measure cap. Body copy set to the full 1280px content width is hard to
     scan; long paragraphs are constrained to this instead. */
  --measure: 700px;

  /* Radius — built on the 4px base unit. Figma's diagram box is 5px; normalized to 4. */
  --radius-sm: 4px;

  /* Shadow — design.md: Components > Card shadow */
  --shadow-card: 0px 0.5px 4px rgba(0, 0, 0, 0.25);

  /* Typography — type scale */
  --text-display: 48px;
  --text-numeral: 96px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-stat: 48px;
  --text-stat-label: 20px;
  --text-body: 16px;
  --text-body-emphasis: 16px;
  --text-label: 16px;
  --text-caption: 14px;
  --text-caption-quote: 14px;
  --text-micro: 12px;
  --text-nav: 14px;
  --text-quote-mark: 40px;

  /* Page chrome — see design.md: Page chrome > Spiral binding.
     These mirror the SVG pattern tile; CSS vars can't reach SVG attributes, so change both together. */
  --binding-width: var(--space-xl);   /* 32px — pattern tile width */
  --binding-pitch: var(--space-xl);   /* 32px — pattern tile height (ring spacing) */

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-page-margin: 80px;
  --space-column-gap: 128px;

  /* Hero — Book component (homepage). Sampled from the book image in the Figma home frame
     (408:49783) — see design.md: Hero — Book component. Used only by css/hero.css. */
  --color-book-cover: #3c2618;          /* leather, median of the cover rim */
  --color-book-page: #eee6d9;           /* paper, median of the page surface */
  --color-book-page-edge: #e0d5c5;      /* stacked page edges, light side (left) */
  --color-book-page-edge-shade: #a79987;/* stacked page edges, shaded side (right) */
  --color-book-crease: #ac997e;         /* darkest line of the gutter */
  --color-book-shade: #5c4226;          /* tint for the gutter and edge shading gradients */
  --color-book-dot: #dfd3c5;            /* dot grid fill (Figma ellipse fill, 100% opacity) */
  --color-book-stitch: #a26c3a;         /* cover stitching thread (lit side of Figma's #79502c stitches) */
  --color-book-thread: #e6dccb;         /* binding thread down the gutter (Figma's knots, grey ~200-234) */
  --color-book-ink: #2d251c;            /* text printed on the pages (warm, not --color-text-primary) */
  --color-book-pen: #4373d3;            /* drawing on the right page: stroke and cursor */

  /* Homepage nav — see design.md: Homepage nav. Brand colours from the Figma nav frames. */
  --color-nav-flower-petal: #ecc9bd;    /* flower petals in the home button */
  --color-nav-flower-centre: #695146;   /* flower centre */
  --color-nav-night: #3c465a;           /* theme toggle, dark-mode badge: night disc */
  --color-nav-day: #eae38b;             /* theme toggle, dark-mode badge: moon + stars */
  --color-nav-sun: #dfa15f;             /* theme toggle, light-mode badge: sun starburst */
  --color-nav-sun-centre: #695146;      /* theme toggle, light-mode badge: sun centre */
  --radius-pill: 50px;                  /* nav pill (home button, active nav item) */

  /* Work library book cards — see design.md: Work library — book cards.
     The accents are the AA-corrected values, not the raw Figma hex. The CTA label stays
     #171717 in every state on all three books, and the mat is the dark panel the preview
     screenshot sits on (sampled from the Figma frames). These are printed-object colours
     like the hero book's, so they do not flip in dark mode. */
  --color-lib-ondemand-bg: #686652;
  --color-lib-ondemand-accent: #f0e9a0;
  --color-lib-ondemand-cta-hover: #f8ed66;
  --color-lib-ondemand-cta-press: #c3b931;
  --color-lib-ondemand-mat: #302f29;
  /* Dark-mode stats-band shade — see design.md: Case study page — header & dark mode → Dark mode
     (per case study). Promoted to :root, alongside this case study's other colours, rather than
     staying a literal inside .cs--on-demand below: the About page's testimonial cards need this
     same shade for their own dark-mode background (design.md: About page in dark mode) but carry
     no .cs--* class, so it has to be readable outside that scope. .cs--on-demand's --cs-band-dark
     aliases here instead of repeating the hex, matching how --cs-accent/-accent-text already
     alias -bg/-accent above rather than duplicating them. */
  --color-lib-ondemand-band-dark: #36352a;

  --color-lib-ai-bg: #695146;
  --color-lib-ai-accent: #ecc9bd;
  --color-lib-ai-cta-hover: #ffe5dc;
  --color-lib-ai-cta-press: #d3856b;
  --color-lib-ai-mat: #473b36;
  --color-lib-ai-band-dark: #372a24;

  --color-lib-lists-bg: #3c465a;
  --color-lib-lists-accent: #e4ac71;
  --color-lib-lists-cta-hover: #fec78d;
  --color-lib-lists-cta-press: #b87020;
  --color-lib-lists-mat: #1c2a44;
  /* Was a plain literal inside .cs--reusable-lists only, with a note that nothing outside it
     needed promoting yet — now two more components do (the Work library book card and the Work
     page's case study band both need their own dark-mode background here), so this gets the same
     :root promotion the other two case studies' band-dark shades already have, for the same
     reason: consumers outside any .cs--* scope. */
  --color-lib-lists-band-dark: #1f242f;

  --color-lib-cta-label: #171717;

  /* Password modal — see design.md: Password modal. The paper tone is sampled from the Figma
     asset rather than estimated. Link and placeholder colours are AA corrections of the frame's
     values, which fail at the sizes they are used; both corrections are recorded in design.md. */
  --color-modal-paper: #dfd4c5;         /* torn sheet, median of the asset's paper area */
  --color-modal-overlay: rgba(250, 250, 247, 0.66);
  --color-modal-link: #0f47b8;          /* corrected from Figma #1257d8 (4.25:1 on the paper) */
  --color-modal-error: #8c1d18;         /* wrong-password message, 6.23:1 on the paper */
  --color-modal-rule: rgba(23, 23, 23, 0.25);
  --color-modal-unlock: #695146;        /* the AI-Powered book's own cover colour */
  --color-modal-unlock-hover: #7a5f52;
  --color-modal-unlock-press: #544037;

  /* Deliberately literal, like --color-album-ink below: this sheet is a fixed photo (the same
     one in both themes, see design.md), so text that followed --color-text-primary/--color-bg
     would flip toward near-white/near-black in dark mode against paper that never darkens,
     going unreadable. --color-modal-input-bg doubles as the Unlock button's own label colour
     (near-white on its brown fill), same reasoning. */
  --color-modal-text: #171717;
  --color-modal-text-secondary: #5f5f5b;
  --color-modal-input-bg: #fafaf7;

  /* Primary pill button — the About page's Resume button, the album's arrows and the password
     modal's Unlock are all this shape and colour. NOTE: #695146 now also exists as
     --color-nav-flower-centre, --color-lib-ai-bg and --color-modal-unlock; they were introduced
     for separate components and have drifted into four names for one hex. Worth consolidating. */
  --color-button-primary: #695146;
  --color-button-primary-label: #fafaf7;

  /* Photo album (About page) — see design.md: Photo album. The first two alias existing tokens
     rather than introducing new values: the cover is the Reusable Lists book's blue, the paper is
     the hero book's page tone.

     --color-album-ink is the caption/outline colour ON that paper, and it is deliberately a
     literal rather than var(--color-text-primary). The album is a physical object, like the hero
     book — its cream paper does not invert in dark mode, so ink that followed the page's text
     token would turn near-white on a cream sheet. Defined here, outside any [data-theme] block,
     so it holds in both modes. */
  --color-album-cover: var(--color-lib-lists-bg);
  --color-album-paper: var(--color-book-page);
  --color-album-ink: #171717;

  /* Dark mode: unlike the hero book, the scrapbook's OWN pages go dark too, not just the ink.
     #1b1a17 is the site's own dark --color-bg value, pinned here as its own literal (not
     var(--color-bg)) so the album's palette stays self-contained and documented in one place,
     matching how --color-album-cover/-paper/-ink are defined above. Ink flips to the site's
     dark-mode text colour for the same reason ink was pinned in the first place: it has to
     stay legible against whatever the paper actually is, light or dark. */
  --color-album-paper-dark: #1b1a17;
  --color-album-ink-dark: #f2efe9;

  /* Scattered diary icons — see design.md: Diary icons. */
  --font-hand: "Dokdo", var(--font-sans);  /* handwritten labels beside the icons */
  --text-hand: 15px;                       /* Figma label size */
  --shadow-book: 0 18px 36px -14px rgba(23, 23, 23, 0.30), 0 3px 8px -2px rgba(23, 23, 23, 0.14);

  /* Stats band surface — see design.md: Case study page — header & dark mode. Each case study
     page overrides these with its own accent; this neutral pair is the fallback for any page that
     shows a band without declaring a case study. */
  --color-stats-band-bg: var(--color-bg-band);
  --color-stats-band-text: var(--color-text-primary);

  /* Nav bar width — see design.md: Homepage nav. One width, shared by every page's nav (the
     homepage/work/about .nav--home row and the case study .topbar) AND by the hero book itself
     (css/hero.css: .book) — all four resolve to this one value, so none of them can ever diverge
     from each other. There used to be a separate --book-width that also shrank with viewport
     *height* so the book fit one screen; that caused the book to go narrower than the (flat) nav
     on short windows, with the nav visibly overhanging it. Removed in favour of this. */
  --nav-width: min(100%, 1259px);
}

/* Case study pages — per-case-study light and dark palettes.
   Light: standard site tokens, with the stats band carrying the case study's accent (Figma
   509:75529). Dark: the accent becomes the whole page, text becomes the AA-corrected accent text,
   and the band drops to a much darker shade of the same hue. Because these override the shared
   tokens on <body>, every section inherits them — header, context, problem, process, impact,
   takeaways and the explore cards alike — rather than needing per-section rules. */

.cs--on-demand {
  --cs-accent: var(--color-lib-ondemand-bg);        /* #686652 */
  --cs-accent-text: var(--color-lib-ondemand-accent); /* #F0E9A0 */
  --cs-band-dark: var(--color-lib-ondemand-band-dark); /* #36352a */
}

.cs--ai-powered {
  --cs-accent: var(--color-lib-ai-bg);              /* #695146 */
  --cs-accent-text: var(--color-lib-ai-accent);     /* #ecc9bd */
  --cs-band-dark: var(--color-lib-ai-band-dark);    /* #372a24 */
}

.cs--reusable-lists {
  --cs-accent: var(--color-lib-lists-bg);           /* #3c465a */
  --cs-accent-text: var(--color-lib-lists-accent);  /* #E4AC71 */
  --cs-band-dark: var(--color-lib-lists-band-dark); /* #1f242f */
}

/* Light: only the band changes. */
.cs--on-demand,
.cs--ai-powered,
.cs--reusable-lists {
  --color-stats-band-bg: var(--cs-accent);
  --color-stats-band-text: var(--cs-accent-text);
}

/* Photo album — dark mode. The album's paper and ink both invert here — the scrapbook pages go
   dark too, the same move the hero book now makes below. See the -dark literals defined above,
   next to the light values. */
[data-theme="dark"] {
  --color-album-paper: var(--color-album-paper-dark);
  --color-album-ink: var(--color-album-ink-dark);
}

/* Hero book — dark mode. See design.md: Hero — Book component → Dark mode. The book is no longer
   exempt from the theme system: it used to stay light in both modes as a "physical object," the
   same reasoning the hero book's paper-and-ink texture once shared with the photo album above —
   the album lost that exemption first (see the block just above), and the book now follows.
   --color-book-pen and --shadow-book are deliberately NOT overridden here: the pen is a fixed
   brand blue, not a paper tone (it still reads at 3.84:1 on the dark page, close to its 3.66:1
   today), and the shadow is unchanged per design.md. There is no dark Figma frame for the book —
   every value below is proposed and flagged there for a visual-QA pass once rendered, same as the
   site-wide dark palette underneath it. */
[data-theme="dark"] {
  --color-book-cover: #1f130b;
  --color-book-page: #1b1a17;           /* reuses the site's --color-bg dark value, like the album's paper */
  --color-book-page-edge: #2a2822;
  --color-book-page-edge-shade: #100f0c;
  --color-book-crease: #302c25;
  --color-book-shade: #0c0a08;
  --color-book-dot: #4a463d;
  --color-book-stitch: #6b4526;
  --color-book-thread: #8f8571;
  --color-book-ink: #e8ded0;
}

/* Dark: the stats band, borders and annotation connectors still take the case study's own hue;
   the page background AND the primary/secondary text no longer do. --color-bg was the first of
   these to go absent from this override (see design.md: Case study page — header & dark mode →
   Dark mode (per case study) — it used to be var(--cs-accent), tinting the whole page in that
   case study's colour). --color-text-primary and --color-text-secondary are now absent for the
   same reason and by the same mechanism: on request, body text on the now-uniform #1b1a17 page
   reads plain white/grey — the site's own standard dark-mode values (#f2efe9 / #a9a49c, defined
   once in the site-wide [data-theme="dark"] rule below) — rather than switching to that case
   study's accent colour. Removing the declaration here just lets that site-wide rule apply
   instead (higher specificity would have kept THIS rule winning if it still set the property —
   the fix is the absence, not a lower-priority value).

   --color-border and --color-annotation deliberately still read --cs-accent-text: the request was
   specifically about text, and these aren't text — they're the 1px section-divider rule and the
   pointer-line/dot annotation connectors, both closer to the stats band and buttons (which also
   keep the case study's own hue) than to body copy. Flagged in the corresponding design.md entry
   in case the intent turns out to be broader than literally "text" once this is seen rendered.

   --cs-accent-text itself is unchanged and still drives --color-stats-band-text below (a
   different surface — the tinted band, not the plain page) and --color-border/-annotation just
   above; --cs-accent is unchanged and still used for the LIGHT-mode stats band background further
   up this file. */
[data-theme="dark"] .cs--on-demand,
[data-theme="dark"] .cs--ai-powered,
[data-theme="dark"] .cs--reusable-lists {
  --color-bg-band: var(--cs-band-dark);
  --color-border: var(--cs-accent-text);
  --color-annotation: var(--cs-accent-text);
  --color-stats-band-bg: var(--cs-band-dark);
  --color-stats-band-text: var(--cs-accent-text);

  /* The placeholder stands in for an image, and Figma's dark frame keeps it light — screenshots
     do not invert. Pinned here, or the global dark value takes it to #2e2b28 and its black label
     disappears against it. */
  --color-bg-placeholder: #d9d9d9;
  --color-placeholder-text: #000;
}

/* Dark mode — see design.md: Dark mode. Proposed warm-dark counterparts to the light palette.
   The hero book no longer sits this out — see its own [data-theme="dark"] block above — but it
   still doesn't pick up THESE chrome tokens; it gets its own dedicated --color-book-* values
   instead, the same way the photo album does. */
[data-theme="dark"] {
  --color-bg: #1b1a17;
  --color-bg-band: #232220;
  --color-bg-placeholder: #2e2b28;
  --color-placeholder-text: #f2efe9;
  --color-text-primary: #f2efe9;
  --color-text-secondary: #a9a49c;
  --color-border: #35322c;
  --color-accent: #4cc2fb;
  --color-accent-bg: #123043;
  --color-annotation: #4a4741;
  --shadow-card: 0px 0.5px 4px rgba(0, 0, 0, 0.6);
}