/* tokens.css — Design tokens for book-template-astro
 * Two layers:
 *   1. Raw palette (Warm Tol hybrid — inherited from the LaTeX book)
 *   2. Semantic roles that reference the palette
 * Dark mode overrides only the semantic layer.
 */

:root {
  /* ===== Layer 1: Raw palette — Warm Tol hybrid =====
   * Source: ~/Claude/claude-best-practices/claude-best-practices.sty lines 117-128
   * Tol Bright relationships + Anthropic warmth. Colorblind-safe. */
  --warm-blue:   #3B6FA0;  /* structural: headings, links, info */
  --warm-rose:   #C06858;  /* attention: warnings, alerts */
  --warm-green:  #4A7E3F;  /* positive: tips, practitioner */
  --warm-plum:   #8A4E82;  /* authority: official, exercises */
  --warm-gold:   #C09840;  /* insight: convergence, reasoning */
  --warm-crimson:#A03838;  /* pitfall: deeper red distinct from warm-rose */

  /* Warm neutrals (Anthropic-derived) */
  --paper:       #FDFCF9;  /* page background — slightly off-white */
  --code-bg:     #F7F5F0;  /* code block background */
  --code-frame:  #B5B3AA;  /* code block border */
  --dark-text:   #1A1A19;  /* body text */

  /* Soft tints — used for callout backgrounds (5% blend with paper) */
  --warm-blue-tint:  color-mix(in srgb, var(--warm-blue)  6%, var(--paper));
  --warm-rose-tint:  color-mix(in srgb, var(--warm-rose)  6%, var(--paper));
  --warm-green-tint: color-mix(in srgb, var(--warm-green) 6%, var(--paper));
  --warm-plum-tint:  color-mix(in srgb, var(--warm-plum)  6%, var(--paper));
  --warm-gold-tint:  color-mix(in srgb, var(--warm-gold)  6%, var(--paper));
  --warm-crimson-tint:color-mix(in srgb, var(--warm-crimson) 6%, var(--paper));

  /* ===== Layer 2: Semantic roles (light mode) ===== */
  --color-bg:         var(--paper);
  --color-bg-subtle:  var(--code-bg);
  --color-text:       var(--dark-text);
  /* 65% clears WCAG AA on --paper (~5.4:1); 55% computed to ≈#807F7E ≈3.9:1, failing AA (#91).
     color-mix re-resolves in the dark scope (cream over deep bg → higher contrast). */
  --color-text-muted: color-mix(in srgb, var(--dark-text) 65%, var(--paper));
  --color-border:     var(--code-frame);
  --color-link:       var(--warm-blue);
  --color-heading:    var(--warm-blue);
  --color-code-bg:    var(--code-bg);
  --color-code-border: var(--code-frame);

  /* Callout semantic roles (left-bar color, used with *-tint bg) */
  --callout-info:     var(--warm-blue);
  --callout-warn:     var(--warm-rose);
  --callout-tip:      var(--warm-green);
  --callout-official: var(--warm-plum);
  --callout-insight:  var(--warm-gold);
  --callout-pitfall:  var(--warm-crimson);
  --callout-worked:   var(--warm-plum);
  --callout-learn:    var(--warm-gold);
  --callout-diagnostic: color-mix(in srgb, var(--warm-blue) 55%, var(--warm-green)); /* #110 DIKTA self-check — teal blend, distinct from plum Practice */

  /* ===== Typography scale ===== */
  --font-body: 'Roboto Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-body:    1.6;   /* target for long-form reading */
  --leading-relaxed: 1.75;

  /* ===== Layout measures =====
   * Three-tier responsive measure tuned via Playwright comparison at
   * 375 / 1280 / 1440 / 1920px viewports (post_transformers commit d9d085b).
   *
   * The tiered measures leave room for the book-aware left sidebar and the
   * Tufte right gutter at every desktop width. v4.26.0 tightened the older
   * 65/80/90ch values after the responsive audit found horizontal overflow.
   *
   * Tier values + utilization (verified):
   *   default:      60ch + 20ch
   *   1440px tier:  66ch + 20ch
   *   1920px tier:  78ch + 24ch
   *
   * These values keep `main + gutter ≤ layout-main` after subtracting the
   * sidebar, while preserving readable line length and short-note width.
   *
   * Mobile (<48rem) handled separately in layout.css — sidenotes reflow
   * inline; the tokens here don't apply below 48rem.
   *
   * Note: CSS custom properties cannot be used in @media expressions, so
   * the breakpoints are encoded as literal rem values in the media queries
   * (90rem ≈ 1440px, 120rem ≈ 1920px).
   */
  --measure-main: 60ch;        /* default: main+gutter fits beside the sidebar at ≥64rem (v4.26.0, #80) */
  --measure-side: 20ch;        /* right-margin sidenote / section-map column */
  --measure-code: 48rem;       /* code-block break-out width: fits 80-char lines comfortably (≈88 mono chars @14px before padding); docs/responsive-reading.md */
  --breakpoint-narrow: 48rem;  /* ~768px — mobile fold (sidenotes inline) */
  --breakpoint-wide: 90rem;    /* ~1440px — wide-desktop tier */
  --breakpoint-ultrawide: 120rem; /* ~1920px — ultrawide tier */

  /* ===== Spacing scale ===== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ===== Borders / radii ===== */
  --radius-sm:  2px;
  --radius-md:  4px;
  --border-bar: 3px;   /* left-bar on callouts and sidenote asides */

  /* ===== Shiki syntax highlighting (css-variables theme) =====
   * Shiki's css-variables mode emits <span style="color:var(--astro-code-token-...)">
   * for each token. Mapping to Warm Tol hues keeps code blocks in the
   * same visual language as prose callouts. Dark mode overrides below. */
  --astro-code-foreground:              var(--color-text);
  --astro-code-background:              var(--color-code-bg);
  /* a11y (v4.26.0, #80): saturated accents fail 4.5:1 on the light code bg →
   * darken (the dark-theme overrides below keep their lighter variants). */
  --astro-code-token-constant:          color-mix(in srgb, var(--warm-rose) 60%, black);
  --astro-code-token-string:            color-mix(in srgb, var(--warm-green) 55%, black);
  --astro-code-token-string-expression: color-mix(in srgb, var(--warm-green) 55%, black);
  --astro-code-token-comment:           var(--color-text-muted);
  --astro-code-token-keyword:           color-mix(in srgb, var(--warm-plum) 60%, black);
  --astro-code-token-parameter:         var(--warm-blue);
  --astro-code-token-function:          color-mix(in srgb, var(--warm-gold) 55%, black);  /* a11y: warm-gold alone is 2.46:1 on the code bg (dark-mode override below) */
  --astro-code-token-punctuation:       var(--color-text-muted);
  --astro-code-token-link:              var(--color-link);
}

/* Tier 2: wide desktop (1440px+). v4.26.0 (#80): main 70ch + gutter 22ch keeps
 * the main+gutter measure inside `layout-main` (viewport − 16rem sidebar) so the
 * Tufte gutter/section-map fits beside the sidebar instead of overflowing. */
@media (min-width: 90rem) {
  :root {
    --measure-main: 66ch;
    --measure-side: 20ch;
  }
}

/* Tier 3: ultrawide (1920px+). Room to widen both again and still fit. */
@media (min-width: 120rem) {
  :root {
    --measure-main: 78ch;
    --measure-side: 24ch;
  }
}

/* ===== Dark mode ==========================================================
 * Override only the raw neutral palette + a couple of accent brightenings
 * for contrast. Because semantic roles (--color-bg, --color-text,
 * --color-link, etc.) and tint calcs reference these via var(), they
 * auto-update with no further work.
 *
 * Precedence: explicit [data-theme="light"] > explicit [data-theme="dark"]
 * > prefers-color-scheme. A small inline script in Base.astro applies any
 * user-saved preference from localStorage before first paint (no FOUC).
 * ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #1A1816;  /* deep warm-neutral page background */
    --code-bg:     #26231F;
    --code-frame:  #3A3632;
    --dark-text:   #E8E5DD;  /* cream body text */

    /* Brighten headings + links for contrast against dark bg */
    --color-heading: color-mix(in srgb, var(--warm-blue) 55%, white);
    --color-link:    color-mix(in srgb, var(--warm-blue) 55%, white);

    /* Shiki token brightenings for contrast on dark code-block bg */
    --astro-code-token-constant:          color-mix(in srgb, var(--warm-rose)  60%, white);
    --astro-code-token-string:            color-mix(in srgb, var(--warm-green) 60%, white);
    --astro-code-token-string-expression: color-mix(in srgb, var(--warm-green) 60%, white);
    --astro-code-token-keyword:           color-mix(in srgb, var(--warm-plum)  55%, white);
    --astro-code-token-parameter:         color-mix(in srgb, var(--warm-blue)  55%, white);
    --astro-code-token-function:          color-mix(in srgb, var(--warm-gold)  65%, white);
  }
}

:root[data-theme="dark"] {
  --paper:       #1A1816;
  --code-bg:     #26231F;
  --code-frame:  #3A3632;
  --dark-text:   #E8E5DD;

  --color-heading: color-mix(in srgb, var(--warm-blue) 55%, white);
  --color-link:    color-mix(in srgb, var(--warm-blue) 55%, white);

  --astro-code-token-constant:          color-mix(in srgb, var(--warm-rose)  60%, white);
  --astro-code-token-string:            color-mix(in srgb, var(--warm-green) 60%, white);
  --astro-code-token-string-expression: color-mix(in srgb, var(--warm-green) 60%, white);
  --astro-code-token-keyword:           color-mix(in srgb, var(--warm-plum)  55%, white);
  --astro-code-token-parameter:         color-mix(in srgb, var(--warm-blue)  55%, white);
  --astro-code-token-function:          color-mix(in srgb, var(--warm-gold)  65%, white);
}

/* BEGIN GENERATED FIGURE TOKENS — source: src/lib/figure-palette.mjs */
/* Do not edit this block by hand. Semantic Warm–Tol roles and ordinal
 * Okabe–Ito series are intentionally separate public contracts. */
:root {
  --fig-blue: #3B6FA0; /* default / lightweight */
  --fig-rose: #C06858; /* caution / problem */
  --fig-green: #4A7E3F; /* positive outcome */
  --fig-plum: #8A4E82; /* authority / heaviest */
  --fig-gold: #9D7D34; /* packaging / coordination */
  --fig-crimson: #A03838; /* failure / severe problem */
  --fig-ink: var(--color-text); /* labels / axes / outlines */
  --fig-paper: var(--color-bg); /* figure background */
  --fig-grid: #8C8981; /* essential secondary structure */

  /* Canonical Okabe–Ito order. Never reorder ordinals per chart or theme. */
  --series-1: #E69F00; /* orange */
  --series-2: #56B4E9; /* sky blue */
  --series-3: #009E73; /* bluish green */
  --series-4: #F0E442; /* yellow */
  --series-5: #0072B2; /* blue */
  --series-6: #D55E00; /* vermillion */
  --series-7: #CC79A7; /* reddish purple */
  --series-8: var(--fig-ink); /* neutral ink */

  /* Backward-compatible aliases used by build-figures since v4.11.0. */
  --diagram-ink: var(--fig-ink);
  --diagram-paper: var(--fig-paper);
  --diagram-grid: var(--fig-grid);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fig-blue: #7297BB;
    --fig-rose: #D29287;
    --fig-green: #7DA275;
    --fig-plum: #AB80A5;
    --fig-gold: #D2B575;
    --fig-crimson: #BB7070;
    --fig-ink: var(--color-text);
    --fig-paper: var(--color-bg);
    --fig-grid: #746E67;
    --series-1: #E69F00;
    --series-2: #56B4E9;
    --series-3: #009E73;
    --series-4: #F0E442;
    --series-5: #0072B2;
    --series-6: #D55E00;
    --series-7: #CC79A7;
    --series-8: var(--fig-ink);
  }
}

:root[data-theme="dark"] {
  --fig-blue: #7297BB;
  --fig-rose: #D29287;
  --fig-green: #7DA275;
  --fig-plum: #AB80A5;
  --fig-gold: #D2B575;
  --fig-crimson: #BB7070;
  --fig-ink: var(--color-text);
  --fig-paper: var(--color-bg);
  --fig-grid: #746E67;
  --series-1: #E69F00;
  --series-2: #56B4E9;
  --series-3: #009E73;
  --series-4: #F0E442;
  --series-5: #0072B2;
  --series-6: #D55E00;
  --series-7: #CC79A7;
  --series-8: var(--fig-ink);
}
/* END GENERATED FIGURE TOKENS */