/* ═══════════════════════════════════════════
   FROG NOGGIN — Design Tokens
   Single source of truth for all visual values
   ═══════════════════════════════════════════ */

:root {
    /* ── Surfaces ── */
    --fn-page-bg: #fdf6ec;
    --fn-surface: #ffffff;
    --fn-surface-muted: #f8f7f2;

    /* ── Ink & Text ── */
    --fn-ink: #2a2a2a;
    --fn-ink-light: #6b6b6b;
    --fn-ink-faint: #aaaaaa;

    /* ── Game Accents ── */
    --fn-neighbors: #4a6fa5;
    --fn-neighbors-bg: #e8f0fe;
    --fn-frogscotch: #5a8a5e;
    --fn-frogscotch-bg: #e8f5e4;

    /* ── Functional ── */
    --fn-accent: #d4a843;
    --fn-success: #22c55e;
    --fn-error: #ef4444;
    --fn-warning: #f59e0b;

    /* ── Borders & Rules ── */
    --fn-border-light: #d0cec5;
    --fn-rule: rgba(42, 42, 42, 0.08);

    /* ── Shapes (wobbly border-radius) ── */
    --fn-shape-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --fn-shape-b: 235px 18px 240px 12px / 18px 210px 12px 240px;
    --fn-shape-c: 220px 20px 250px 14px / 14px 240px 18px 230px;

    /* ── Shadows ── */
    --fn-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06), 6px 6px 0 rgba(0, 0, 0, 0.03);
    --fn-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.08), 10px 10px 0 rgba(0, 0, 0, 0.04);
    --fn-shadow-sidebar: 4px 0 12px rgba(0, 0, 0, 0.1), 8px 0 24px rgba(0, 0, 0, 0.05);

    /* ── Typography ── */
    --fn-font-heading: 'Walter Turncoat', cursive;
    --fn-font-body: 'Patrick Hand', cursive;

    /* ── Baseline grid ── */
    --fn-line: 28px;

    /* ── Bridge: map old variable names to new tokens ── */
    --color-title: var(--fn-ink);
    --color-bg: var(--fn-page-bg);
    --color-hover: var(--fn-accent);
    --color-text: var(--fn-ink);
    --color-page-bg: var(--fn-page-bg);
    --color-surface: var(--fn-surface);
    --color-accent: var(--fn-accent);
    --color-success: var(--fn-success);
    --color-error: var(--fn-error);
    --color-warning: var(--fn-warning);
    --color-info: #3b82f6;
}