/*
//
//   THEME — ai-slate  (warm slate / ivory)
//  ==========================================
//
//  Switchable theme for index.html, selected by the nav drawer's colour-theme
//  control. Activated by  <html data-theme="ai-slate">  (set by the inline
//  apply script in index.html's <head> from localStorage). Shown to visitors
//  as "AI Slate" (id "ai-slate"). The palette was lifted from the source clone
//  (index-standalone-anthropic-5.html).
//
//  STRATEGY — two layers:
//    1. RAMP REMAP. The whole page runs off the --colour-tw-neutral-* ramp
//       (body bg in base.css, the header gradient in page-header.css). Remap
//       the light end of that ramp → warm ivory/manilla and the background +
//       header re-skin for free. The dark end (text) is left alone for WCAG.
//    2. ACCENTS. Everything the ramp doesn't reach — fonts, the book-cloth
//       eyebrow, slate footer, cloud whispers, manilla links — as explicit
//       [data-theme="ai-slate"]-scoped overrides.
//
//  WIRING (already done in index.html):
//    • <link rel="stylesheet" href="…/theme-ai-slate.css"> after the bundle.
//    • The DM Sans + Lora webfonts are injected by the apply script ONLY when
//      this theme is active, so default visitors download nothing extra.
//
//  TO ADD ANOTHER THEME: copy this file to theme-<id>.css, swap the values,
//  add a <button data-set-theme="<id>"> + swatch in the drawer, and (if it
//  needs webfonts) extend the apply script's font-injection branch.
//
*/

/*  NB: the token block is scoped to `html[data-theme="ai-slate"]`, not bare
    `[data-theme="ai-slate"]`. index.html re-declares the --kjg-tm-* tokens in an
    inline :root AFTER this stylesheet is linked; at equal specificity that later
    :root would win. The `html` qualifier lifts this to (0,1,1) so it beats :root
    regardless of source order. (The LAYER 2 descendant rules below don't need it
    — they out-specify the component CSS already.) */
html[data-theme="ai-slate"] {

    /*  ----  palette (raw tokens, from the source clone)  ----  */
    --slate-dark: #191919;  --slate-medium: #262625; --slate-light: #40403E;
    --cloud-dark: #666663;  --cloud-medium: #91918D; --cloud-light: #BFBFBA;
    --ivory-dark: #E5E4DF;  --ivory-medium: #F0F0EB; --ivory-light: #FAFAF7;
    --book-cloth: #CC785C;  --kraft: #D4A27F;        --manilla: #EBDBBC;
    --black: #000000;       --white: #FFFFFF;        --focus: #61AAF2;
    --error: #BF4D43;
    --font-sans:  "DM Sans", Arial, sans-serif;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;


    /*  §LAYER 1 — RAMP REMAP. Light end of the neutral ramp → warm ivory/manilla.
        This single remap warms the body background AND the hero header gradient
        (page-header.css: neutral-300 0% → neutral-200 75% → neutral-050 100%,
        i.e. manilla → ivory-dark → ivory-light) with no per-surface overrides. */
    --colour-tw-neutral-050: #FAFAF7;  /* ivory-light  — body bg + gradient bottom */
    --colour-tw-neutral-100: #F0F0EB;  /* ivory-medium — light surfaces */
    --colour-tw-neutral-200: #E5E4DF;  /* ivory-dark   — borders + gradient mid */
    --colour-tw-neutral-300: #EBDBBC;  /* manilla      — gradient top */


    /*  §3 BRAND / ACCENT — the palette's signature is Book Cloth orange  */
    --theme-accent-light:  var(--kraft);
    --theme-accent:        var(--book-cloth);
    --theme-accent-strong: var(--slate-medium);


    /*  §4 FONT FAMILIES — DM Sans for real headings, Lora for body. (The .fake-*
        display classes are reassigned by selector below, since most of the
        page's "headings" are .fake-* paragraphs, not real h1–h6.)  */
    --theme-font-family:         var(--font-serif);   /* body / p / li */
    --theme-font-family-heading: var(--font-sans);    /* real h1–h6 */


    /*  §2 TESTIMONIALS — the cards read --kjg-tm-card-bg (not the neutral ramp),
        so warm them explicitly: cool #f5f5f7 → ivory-medium. This token also
        re-warms the mobile fade gradient + show-more. The other four match
        index.html's defaults; listed only to be explicit.  */
    --kjg-tm-card-bg:   var(--ivory-medium);   /* was #f5f5f7 */
    --kjg-tm-text:      #4a4a4a;
    --kjg-tm-name:      #1a1a1a;
    --kjg-tm-highlight: #fff4d6;
    --kjg-tm-mark:      var(--manilla);

}


/*  ====================================================================
    §LAYER 2 — ACCENT OVERRIDES (surfaces the ramp doesn't reach).
    All scoped under [data-theme="ai-slate"]; each matches the base rule's
    specificity (incl. the footer's stronger selectors) so the theme wins.
    Lifted from index-standalone-anthropic-5.html's theme <style> block.
    ==================================================================== */

/*  Footer → Slate Medium  */
[data-theme="ai-slate"] .page-footer { background-color: var(--slate-medium); }

/*  Header watermark name (.fake-h1) → Ivory Dark  */
[data-theme="ai-slate"] .fake-h1 { color: var(--ivory-dark); }

/*  Eyebrow (the H2 article-title: digit + label + connector line) → Book Cloth.
    The line colour is hard-wired to --var-font-color-h2 in article-title.css,
    so it's recoloured explicitly here rather than via the h2 token (which would
    repaint every h2). Footer copies match article-title.css's footer cascade. */
[data-theme="ai-slate"] .article-title,
[data-theme="ai-slate"] footer .article-title { color: var(--book-cloth); }
[data-theme="ai-slate"] .article-title-line,
[data-theme="ai-slate"] footer .article-title-line { border-bottom-color: var(--book-cloth); border-color: var(--book-cloth); }

/*  Whispers → Cloud Light + serif (faint-by-intent ghosted look)  */
[data-theme="ai-slate"] .whisper > div > p,
[data-theme="ai-slate"] .whisper > div > h1,
[data-theme="ai-slate"] .whisper > div > h2,
[data-theme="ai-slate"] .whisper > div > h3,
[data-theme="ai-slate"] .whisper > div > h4,
[data-theme="ai-slate"] .whisper > div > h5,
[data-theme="ai-slate"] .whisper > div > h6 { color: var(--cloud-light); font-family: var(--font-serif); }

/*  Links → Manilla; hover & focus → Focus blue with a clean ring.
    Skip-links keep their own styling (excluded via :not).  */
[data-theme="ai-slate"] a:not(.skip-link-top),
[data-theme="ai-slate"] a:not(.skip-link-top):visited { color: var(--manilla); }
[data-theme="ai-slate"] a:not(.skip-link-top):hover { color: var(--focus); }
[data-theme="ai-slate"] a:not(.skip-link-top):focus,
[data-theme="ai-slate"] a:not(.skip-link-top):focus-visible {
    color: var(--focus);
    background-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
[data-theme="ai-slate"] footer a:not(.skip-link-top),
[data-theme="ai-slate"] footer a:not(.skip-link-top):visited { color: var(--manilla); }
[data-theme="ai-slate"] footer a:not(.skip-link-top):hover { color: var(--focus); }

/*  NAV CONTROLS under ai-slate ------------------------------------------------
    The nav lives outside the standalone this theme was lifted from, so it needs
    its own handling against the generic link rules above:

    1) COLOUR — hold the burger, close ✕, theme toggle and drawer section links on
       the neutral ramp. Critically this includes :visited — the theme's
       `a:not(.skip-link-top):visited → manilla` rule (0,3,1) would otherwise paint
       already-visited menu items pale tan. The .site-nav__links a:visited selector
       below is (0,4,1) so it wins. (manilla on ivory is near-invisible for UI.)  */
[data-theme="ai-slate"] .site-nav__drawer .site-nav__links a,
[data-theme="ai-slate"] .site-nav__drawer .site-nav__links a:visited,
[data-theme="ai-slate"] .site-nav__burger,
[data-theme="ai-slate"] .site-nav__close,
[data-theme="ai-slate"] .site-nav__theme-toggle { color: var(--colour-tw-neutral-900); }

/*  2) ACCENT — the chips' hover/focus accent is hardcoded `hotpink` in site-nav.css
       (the DEFAULT theme's brand pink). Under ai-slate that clashes; swap it for the
       slate blue so the menu's hover/focus reads as this theme, not pink. */
[data-theme="ai-slate"] .site-nav__burger:hover,
[data-theme="ai-slate"] .site-nav__burger:focus,
[data-theme="ai-slate"] .site-nav__burger:focus-visible,
[data-theme="ai-slate"] .site-nav__close:hover,
[data-theme="ai-slate"] .site-nav__close:focus,
[data-theme="ai-slate"] .site-nav__close:focus-visible,
[data-theme="ai-slate"] .site-nav__theme-toggle:hover,
[data-theme="ai-slate"] .site-nav__theme[open] .site-nav__theme-toggle { border-color: var(--focus); }
[data-theme="ai-slate"] .site-nav__theme-toggle:focus-visible { outline-color: var(--focus); }

/*  Logo-wall "show more" button → warm ivory (logo-wall.css hardcodes cool
    #f5f5f7 and reads no token, so it needs an explicit override).  */
[data-theme="ai-slate"] .logo-wall-more { background: var(--ivory-medium); }

/*  Type: DM Sans on the display .fake-* classes, Lora on body copy + .fake-h5.
    (Pairs with the --theme-font-family* tokens above, which cover real h1–h6
    and the body element.)  */
[data-theme="ai-slate"] .fake-h1,
[data-theme="ai-slate"] .fake-h2,
[data-theme="ai-slate"] .fake-h3,
[data-theme="ai-slate"] .fake-h4,
[data-theme="ai-slate"] .fake-h6 { font-family: var(--font-sans); }
[data-theme="ai-slate"] body,
[data-theme="ai-slate"] p,
[data-theme="ai-slate"] li,
[data-theme="ai-slate"] .fake-h5 { font-family: var(--font-serif); }

/*  DM Sans wants NORMAL tracking. The .fake-* display headings carry Poppins-tuned
    NEGATIVE letter-spacing in fake-headings.css — tuned for Poppins (wide), it
    over-tightens the narrower DM Sans (letters crowd/overlap). The font-fit
    --theme-letter-spacing-adjust knob can't reach these (it only covers real
    h1–h6, not the .fake-* paragraphs), so reset each here. One rule per selector
    beats every breakpoint: the [data-theme] descendant lifts it to (0,2,0) over
    the .fake-* (0,1,0) base + media steps.
      • fake-h1 (hero watermark): was 0 → −4px → −7px (--var-letter-spacing-h1)
      • fake-h3: was normal → −0.5px@768 → −1px@1200  (+ line-height 1.2→1.3→1.25)
      • fake-h4: was −1px → −0.5px@768 */
[data-theme="ai-slate"] .fake-h1,
[data-theme="ai-slate"] .fake-h4 { letter-spacing: normal; }
[data-theme="ai-slate"] .fake-h3 { letter-spacing: normal; line-height: 1.1; }


/*  ====================================================================
    §FIT (optional) — Lora/DM Sans run smaller than Poppins for their px.
    The standalone accepts that. To normalise to Poppins' apparent size
    WITHOUT editing the structural per-breakpoint font-sizes, add these to
    the [data-theme="ai-slate"] token block above (tune by eye):

        --theme-font-size-adjust: 0.52;       (lift apparent size toward Poppins)
        --theme-letter-spacing-adjust: 0px;
        --theme-heading-stroke-scale: 1;      (DM Sans has real weights; 0 drops faux-bold)
    ==================================================================== */
