/* ===================================================================
   Shared design tokens.

   The home page and the all-tools directory are one design: the same
   accent, the same paper/ink neutrals, the same radii and shadows.
   Holding those values in each page's own stylesheet meant two copies
   that would drift the first time one of them was tweaked, so they live
   here and both pages opt in by scope.

   Only custom properties belong in this file. Rules that use them stay
   in the page stylesheet that owns them, so loading this file can never
   change how anything is laid out.

   ---- the palette ----

   These are the site's own colours, not a new theme: white paper, a
   warm beige offset behind each card, thin light-grey borders, one
   bright blue for icons and accents, dark navy headings over near-black
   text. An earlier pass on the redesigned home page had drifted to a
   cooler indigo with grey-blue neutrals; this brings it back.

   The canonical names sit on :root so anything on the site can reuse
   them. They are declarations only - nothing outside .home/.toolspage
   consumes them, so publishing them here changes no existing page.

   The --h-* names below are aliases. Every rule in IndexPage.css and
   toolspage.css already reads them, so retuning the palette is a change
   to this file alone rather than a hunt through two stylesheets. New
   rules should prefer the canonical names.
   =================================================================== */

:root {
    /* ---- surfaces ---- */
    --page-background: #ffffff;

    /* Barely-there warm white for banded sections. Deliberately close to
       white: the page should read as paper, with the bands only just
       separating one block from the next. */
    --page-background-soft: #fdfbf9;

    --card-background: #ffffff;

    /* The warm beige layer that sits behind and slightly below-right of
       each card. This is the detail that gives the site its character -
       a white card on a white page with only a hairline border would
       look flat. Rendered as a zero-blur offset shadow rather than a
       second element, so it costs no extra DOM. */
    --card-offset-background: #f8f2ee;

    --card-border: #d8d8d8;

    /* For dividers and inner rules, where a full-strength border would
       cut the card up. */
    --card-border-soft: #e8e4e0;

    /* ---- accent ---- */

    /* Icons, small accents, borders and focus rings. Against white this
       is 3.9:1 - comfortably past the 3:1 that WCAG 1.4.11 asks of
       non-text UI colour, and it is never used for body text. */
    --primary-blue: #2583dc;

    /* The same blue darkened for text on white, where 4.5:1 is required
       and #2583dc reaches only 3.9:1. This one is 5.2:1. Used for link
       text and hovered titles; visually the same colour, just readable.
       Without it the palette would fail WCAG on every link. */
    --primary-blue-strong: #1a6ec0;

    /* Icon tiles and the very light hover tint. Warm-leaning so it sits
       against the beige rather than fighting it. */
    --primary-blue-soft: #eaf3fc;

    --primary-blue-ring: rgb(37 131 220 / 38%);

    /* ---- ink ---- */

    /* Headings and card titles. 11.2:1 on white. */
    --heading-color: #343a52;

    /* Body text. 18.9:1 on white. */
    --text-color: #111111;

    /* Secondary text - counts, captions, category labels. Warm-neutral
       to match the beige, and dark enough to pass at 6.7:1 rather than
       the usual mid-grey that lands just under. */
    --text-muted: #5f5b57;

    /* ---- depth ----
       Kept deliberately light. The beige offset does the work; the
       ambient shadows only soften the edge. */
    --card-offset: 4px 4px 0 var(--card-offset-background);
    --card-offset-hover: 6px 6px 0 var(--card-offset-background);
}

.home,
.toolspage {
    /* Aliases. Existing rules read these names; the values above are the
       single source of truth. */
    --h-accent: var(--primary-blue);
    --h-accent-strong: var(--primary-blue-strong);
    --h-accent-soft: var(--primary-blue-soft);
    --h-accent-ring: var(--primary-blue-ring);

    --h-ink: var(--text-color);
    --h-ink-2: var(--heading-color);
    --h-muted: var(--text-muted);

    --h-paper: var(--card-background);
    --h-canvas: var(--page-background-soft);
    --h-line: var(--card-border);
    --h-line-soft: var(--card-border-soft);

    /* Warm-tinted rather than blue-black, so a shadow never introduces a
       cool cast the rest of the palette does not have. */
    --h-shadow-sm: 0 1px 2px rgb(72 60 52 / 6%);
    --h-shadow-md: 0 4px 12px -4px rgb(72 60 52 / 12%), 0 2px 4px -2px rgb(72 60 52 / 7%);
    --h-shadow-lg: 0 16px 34px -12px rgb(72 60 52 / 18%);

    --h-r-sm: 10px;
    --h-r-md: 14px;
    --h-r-lg: 20px;
    --h-r-pill: 999px;

    color: var(--text-color);
    background: var(--page-background);
}

/* Dark theme. The layout sets .theme-dark on <body> from a cookie; this
   is pre-existing, opt-in behaviour and is left working.

   Only the tokens change, so no rule anywhere is duplicated. The values
   are warm-neutral rather than blue-black, so the dark theme reads as
   the same palette with the lights off rather than a different design.
   Nothing here affects the light theme. */
.theme-dark .home,
.theme-dark .toolspage {
    --h-accent: #7ab6f0;
    --h-accent-strong: #a3cdf6;
    --h-accent-soft: #17253355;
    --h-accent-ring: rgb(122 182 240 / 40%);

    --h-ink: #f4f2f0;
    --h-ink-2: #d7dae6;
    --h-muted: #a9a49f;

    --h-paper: #17161a;
    --h-canvas: #121114;
    --h-line: #322f2c;
    --h-line-soft: #26231f;

    --h-shadow-sm: 0 1px 2px rgb(0 0 0 / 45%);
    --h-shadow-md: 0 4px 14px -4px rgb(0 0 0 / 55%);
    --h-shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 65%);

    /* The beige offset would glow against a dark card, so in dark mode
       it becomes a slightly lifted neutral instead. The effect is the
       same - the card sits on something - without the warm colour
       turning into a light source. */
    --card-offset: 4px 4px 0 #232025;
    --card-offset-hover: 6px 6px 0 #2b272d;
}

/* Reduced motion is handled where the transitions are declared -
   IndexPage.css and toolspage.css each already have that block. A third
   copy here would be the duplication this file exists to prevent, and
   only custom properties belong in it anyway. Because the hover state
   changes colour, border and offset as well as transform, a visitor who
   has asked for less motion still gets the full affordance; only the
   two-pixel lift stops. */