/*
 * Feessie design tokens.
 *
 * ── HOW TO RE-BRAND ──────────────────────────────────────────────────────
 * Change ONLY the values in section 1. Everything else on the site is derived
 * from them (section 2) with color-mix(), so hovers, washes, borders and soft
 * text follow automatically. After changing them, run the test suite:
 * BrandTokensTest checks every text/background pair against WCAG AA and fails
 * with the exact pair and ratio if a new colour isn't readable.
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Direction: "De Keukentafel" (.agents/branding/work/art-direction.md) — warm
 * paper, warm ink, one marker-red action per screen, tape ochre and ballpoint
 * blue as support.
 */

/* Self-hosted fonts (perf audit F2): variable-font files covering the full weight range used
   anywhere on the site, so every page needs only one file per family regardless of which weights
   it uses — instead of Google's per-weight static cuts. Latin + latin-ext (Dutch diacritics like
   "coördineren", "café", names like "Vitória"); Google's vietnamese/cyrillic-ext subsets are
   dropped since nothing on the site needs them. Was fonts.googleapis.com/fonts.gstatic.com
   (see legal_privacy.php's prior history for the disclosure this replaced). */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. BRAND PRIMITIVES — the only values to edit when re-branding. */
:root {
    --brand-paper: #fffcf7;      /* page background: almost white, a breath of warmth */
    --brand-ink: #23212e;        /* text and lines: deep ink */
    --brand-primary: #e3001b;    /* the one main action per screen: toy-shop red */
    --brand-accent: #ffc800;     /* labels, stickers, highlights: sunshine yellow */
    --brand-secondary: #0e5fa8;  /* links, focus, secondary actions: bright blue */
    --brand-soft: #ff86b0;       /* playful washes and stickers: bubblegum pink */
    --brand-success: #256b0a;    /* "done" only — never money */
    --brand-danger: #b0103a;     /* errors and destructive actions; kept off the primary hue */
    --brand-reveal: #ffb020;     /* reveal layer only (unbox / TV) */

    /* Confetti colours: decoration only (bunting, confetti, stickers, card
       stripes, washes, button lips) — never used for text, so they need no
       contrast check. */
    --brand-pop-pink: #ff5fa8;
    --brand-pop-mint: #58cc02;
    --brand-pop-sky: #1cb0f6;
    --brand-pop-sun: #ffc800;
    --brand-pop-lilac: #ce82ff;
    --brand-pop-orange: #ff9600;

    /* Shape & weight: how chunky and "pressable" the UI feels. */
    --brand-radius: 16px;        /* cards, panels, inputs */
    --brand-button-lip: 4px;     /* the 3-D edge under buttons (0 = flat) */
    --brand-weight-display: 700; /* headings */
    --brand-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --brand-font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* 2. DERIVED TOKENS — use these in components; don't hard-code colours. */
:root {
    /* surfaces */
    --paper: var(--brand-paper);
    --surface-raised: color-mix(in srgb, var(--brand-paper) 45%, #fff);
    --surface-sunken: color-mix(in srgb, var(--brand-paper) 90%, var(--brand-ink));
    --wash-soft: color-mix(in srgb, var(--brand-soft) 30%, var(--brand-paper));
    --wash-secondary: color-mix(in srgb, var(--brand-secondary) 14%, #fff);
    --wash-accent: color-mix(in srgb, var(--brand-accent) 35%, var(--brand-paper));
    --wash-success: color-mix(in srgb, var(--brand-success) 14%, #fff);
    --wash-danger: color-mix(in srgb, var(--brand-danger) 10%, #fff);

    /* confetti (decoration only) */
    --pop-pink: var(--brand-pop-pink);
    --pop-mint: var(--brand-pop-mint);
    --pop-sky: var(--brand-pop-sky);
    --pop-sun: var(--brand-pop-sun);
    --pop-lilac: var(--brand-pop-lilac);
    --pop-orange: var(--brand-pop-orange);
    --wash-pink: color-mix(in srgb, var(--brand-pop-pink) 16%, var(--brand-paper));
    --wash-mint: color-mix(in srgb, var(--brand-pop-mint) 16%, var(--brand-paper));
    --wash-sky: color-mix(in srgb, var(--brand-pop-sky) 16%, var(--brand-paper));
    --wash-sun: color-mix(in srgb, var(--brand-pop-sun) 22%, var(--brand-paper));
    --wash-lilac: color-mix(in srgb, var(--brand-pop-lilac) 16%, var(--brand-paper));

    /* progress bars (savings goal, wizard steps): a confetti ribbon */
    --progress-fill: linear-gradient(90deg, var(--brand-primary), var(--brand-pop-orange) 35%, var(--brand-pop-sun) 70%, var(--brand-pop-mint));

    /* text */
    --ink: var(--brand-ink);
    --ink-soft: color-mix(in srgb, var(--brand-ink) 78%, var(--brand-paper));
    --ink-faint: color-mix(in srgb, var(--brand-ink) 55%, var(--brand-paper)); /* large text / non-essential only */
    --on-primary: #fff;
    --on-secondary: #fff;
    --on-danger: #fff;

    /* lines */
    --rule: color-mix(in srgb, var(--brand-ink) 13%, transparent);
    --rule-strong: color-mix(in srgb, var(--brand-ink) 35%, transparent);

    /* action colours */
    --primary: var(--brand-primary);
    --primary-hover: color-mix(in srgb, var(--brand-primary) 84%, #000);
    --primary-shade: color-mix(in srgb, var(--brand-primary) 62%, #000);   /* button lip */
    --secondary: var(--brand-secondary);
    --secondary-hover: color-mix(in srgb, var(--brand-secondary) 84%, #000);
    --secondary-shade: color-mix(in srgb, var(--brand-secondary) 62%, #000);
    --accent: var(--brand-accent);
    --accent-shade: color-mix(in srgb, var(--brand-accent) 70%, var(--brand-pop-orange));
    --soft: var(--brand-soft);
    --success: var(--brand-success);
    --danger: var(--brand-danger);
    --danger-hover: color-mix(in srgb, var(--brand-danger) 84%, #000);
    --danger-shade: color-mix(in srgb, var(--brand-danger) 62%, #000);
    --reveal: var(--brand-reveal);
    --focus: var(--brand-secondary);

    /* type */
    --font-display: var(--brand-font-display);
    --font-text: var(--brand-font-body);
    --weight-display: var(--brand-weight-display);

    /* shape */
    --radius-card: var(--brand-radius);
    --radius-label: calc(var(--brand-radius) / 2);
    --button-lip: var(--brand-button-lip);
    --radius-pill: 999px;
    --radius-sm: calc(var(--brand-radius) * 0.4);
    --radius-md: calc(var(--brand-radius) * 0.65);
    --radius-lg: calc(var(--brand-radius) * 0.85);
    --radius-xl: var(--brand-radius);
    --shadow-lift: 0 6px 18px color-mix(in srgb, var(--brand-ink) 18%, transparent); /* lifted things only */
    --shadow-sticker: 0 2px 0 color-mix(in srgb, var(--brand-ink) 14%, transparent);
}