/* ============================================================
 * KAGN design tokens — the single source of truth.
 *
 * Every user-facing page links this file FIRST; no page or CSS
 * file may define its own :root copy of these tokens (that's
 * how the 2026-06 palette drift happened — see
 * docs/ui-audit-2026-06-11.md). Add new tokens here, never in
 * page styles. 404.html is intentionally self-contained.
 * ============================================================ */
:root {
    /* Forest greens — brand core */
    --forest-900: #0d2818;
    --forest-800: #1a3a2a;
    --forest-700: #234d38;
    --forest-600: #2d5a3d;
    --forest-500: #3d7a52;
    --forest-400: #5a9970;
    --forest-300: #7ab892;
    --forest-200: #a5d4b8;
    --forest-100: #e8f5ed;
    --forest-50: #f4faf6;

    /* Bark browns */
    --bark-700: #5c4033;
    --bark-600: #7a5a45;
    --bark-500: #a07858;

    /* Sand / paper surfaces */
    --sand-300: #e8ddd0;
    --sand-200: #f5f0e8;
    --sand-100: #faf8f4;
    --sand-50: #fdfcfa;
    --sand-border: #e6d8bf;

    /* Cream surfaces (hub cards) */
    --cream-50: #f5ede0;
    --cream-100: #fff8ec;

    /* Coral accent */
    --coral-400: #f08c6e;
    --coral-500: #e76f51;
    --coral-600: #d45a3b;

    /* Gold accent + lifer-highlight ramp */
    --gold-50: #fdf8ea;
    --gold-100: #f9efce;
    --gold-200: #f2e0a4;
    --gold-400: #f4c430;
    --gold-500: #daa520;
    --gold-600: #b8860b;
    --gold-700: #8c6508;
    --gold-800: #6b4e06;

    /* Sky + ochre accents */
    --sky-500: #4a90a4;
    --sky-600: #3a7a8e;
    --ochre-600: #8c5a2b;

    /* AI identification confidence */
    --conf-high: #3d9e3a;
    --conf-mid: #cf9b4a;
    --conf-low: #cf4a4a;

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --text-muted: #666;

    /* Misc surfaces */
    --bg-tertiary: #eee;

    /* Type */
    --font-display: 'Fraunces', Georgia, serif;

    /* Elevation */
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 12px 32px rgba(0,0,0,0.08);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Safe areas (iOS notch / home bar) */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}