/*
    Design tokens — UI redesign (see __devel/_archive/design_handoff_ui_redesign/README.md)

    Shared custom properties for the redesigned Gym (Home/puzzles) and
    Toolbox (admin) surfaces. Component CSS (main-styles.css, toolbox.css,
    per-puzzle css, etc.) should reference these rather than hardcoding
    the raw values, so the two layouts stay visually consistent.

    Not every existing view uses these yet — they're introduced ahead of
    the phased rollout described in the README.
*/

:root {
    /* Surfaces */
    --bg-page: #f2efe9;
    --surface-card: #fdfcfa;
    --surface-header: #ffffff;
    --rail-bg: oklch(0.97 0.01 150);

    /* Text */
    --text-primary: #2b2b28;
    --text-secondary: rgba(43, 43, 40, .7);
    --text-secondary-muted: rgba(43, 43, 40, .55);
    --text-label: rgba(43, 43, 40, .45);

    /* Borders */
    --border-subtle: rgba(43, 43, 40, .08);
    --border-card: rgba(43, 43, 40, .1);
    --border-row: rgba(43, 43, 40, .06);
    --border-input: rgba(43, 43, 40, .15);
    --border-strong: rgba(43, 43, 40, .4);

    /* Neutral fills (pills/buttons/table header backgrounds) */
    --neutral-fill: rgba(43, 43, 40, .06);
    --neutral-fill-strong: rgba(43, 43, 40, .04);

    /* Accent — sage (number puzzles, links, "Edit" actions) */
    --accent-sage: oklch(0.55 0.09 150);
    --accent-sage-link: oklch(0.5 0.09 150);
    --accent-sage-link-hover: oklch(0.4 0.09 150);
    --accent-sage-tint-banner: oklch(0.94 0.03 150);
    --accent-sage-tint-cell: oklch(0.94 0.05 150);

    /* Accent — clay (word puzzles, primary buttons, avatar, active nav) */
    --accent-clay: oklch(0.6 0.09 40);
    --accent-clay-tint: oklch(0.94 0.05 40);

    /* Deliberate deviation from the core palette: error feedback only */
    --accent-error-tint: oklch(0.93 0.05 25);

    /* Typography */
    --font-heading: 'Newsreader', serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Radii */
    --radius-btn: 6px;
    --radius-tile: 8px;
    --radius-rail: 11px;
    --radius-card: 14px;
    --radius-pill: 999px;
}