/* ===========================================================================
 * tokens.css — the single source of truth for colour.
 *
 * Every page links this file first. Before it existed the palette was pasted
 * into five separate `:root` blocks (style.css plus login/invite/index.html)
 * and 60 more times as raw hexes inside the JS, so "change the colours" meant
 * touching twelve files and missing some.
 *
 * Two rules keep it that way:
 *   1. No colour literal anywhere else. CSS uses var(); JS reads PALETTE from
 *      utils.js, which resolves these same custom properties.
 *   2. Tints are `color-mix(in srgb, var(--token) N%, transparent)`, never a
 *      hand-written rgba() of the same colour.
 *
 * On the palette itself — the app is a health tracker for adults managing
 * weight and medical follow-up (InBody, lab work), not a performance app for
 * athletes. Warm paper and ink, one green accent. See docs/design_palette.md.
 * ========================================================================= */

:root {
    /* --- Surfaces ---------------------------------------------------------
     * Paper, not white: #fffdf8 cards sit on a #f5f1e8 page, so a card reads
     * as a card without needing a heavy border or shadow to say so. */
    --bg-color:       #f5f1e8;
    --card-bg:        #fffdf8;
    --surface-sunken: #ebe5d7;   /* inputs, progress tracks — recessed wells */

    /* --- Ink --------------------------------------------------------------
     * Warm near-black rather than pure #000: on a cream page pure black reads
     * as a hole. All three clear AA on both --bg-color and --card-bg. */
    --text-primary:   #231f1c;   /* 14.5:1 on --bg-color */
    --text-secondary: #56504a;   /*  7.1:1 */
    --text-muted:     #726d62;   /*  4.6:1 */

    /* --- Accent -----------------------------------------------------------
     * One green doing both jobs, which is why this exact value: 5.0:1 with
     * --on-accent text on top (buttons) and 4.5:1 as text on --bg-color
     * (links, figures). A lighter green would fail the first, a darker one
     * the second, and we would need two tokens and a rule about which. */
    --accent-primary:   #2b7d47;
    --accent-secondary: #1f5c34;   /* hover, and the far stop of gradients */
    --on-accent:        #fffdf8;
    /* profile.js has referenced this since before the repaint, but nothing ever
     * defined it — the invite-quota progress bar has been rendering empty. */
    --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

    /* --- Heat -------------------------------------------------------------
     * "Worth noticing", never an alarm. This is where intake over target,
     * high training load and moderate-effort tags live. Terracotta carries
     * attention without the fight-or-flight of red. 5.1:1 on --bg-color. */
    --heat: #a84a20;

    /* --- Alarm ------------------------------------------------------------
     * System failure ONLY: sync failed, session expired, delete confirmation.
     * Never user behaviour. Eating above target is data, not an error, and
     * colouring it the same as a crash is what made the old palette punitive.
     * 5.9:1 on --bg-color. */
    --danger: #a8332a;

    --info: #2f6f9f;

    /* --- Categorical data -------------------------------------------------
     * Macro bars and chart series need hues that are merely *distinguishable*.
     * They carry no judgement, so they get their own names — otherwise the
     * next reader sees --heat on the protein bar and assumes protein is a
     * problem. */
    --macro-protein: #a84a20;
    --macro-carbs:   #56504a;
    --macro-fat:     #2b7d47;

    /* Energy-balance pills and chart series. All four clear 4.5:1 on
     * --bg-color, which the old #3498db / #f39c12 / #9b59b6 did not once the
     * page stopped being black. */
    --cat-green:  #2b7d47;
    --cat-blue:   #2f6f9f;
    --cat-amber:  #9a5c12;
    --cat-violet: #6b4c9a;
    --cat-teal:   #1f7a75;

    /* Streak tiers (🥚 → ⚡). Purely decorative, but they were picked against
     * black — #f0c060 and #e8b84b were pale gold on a dark card and are barely
     * visible on cream, so each is the same idea re-weighted for paper. */
    --tier-gold:  #7d6310;
    --tier-warm:  #8a6614;
    --tier-brown: #6f5238;

    /* --- Ink veils --------------------------------------------------------
     * Subtle fills. These replace the 49 rgba(255,255,255,α) overlays the
     * dark theme used; on paper the same idea has to be ink, not light. */
    --fill-1: rgba(35, 31, 28, 0.035);
    --fill-2: rgba(35, 31, 28, 0.06);
    --fill-3: rgba(35, 31, 28, 0.09);
    --fill-4: rgba(35, 31, 28, 0.13);
    --muted-fill: #c9c2b2;   /* a paused streak, a disabled dot */

    /* --- Borders ---------------------------------------------------------- */
    --border-color:    #e3ddcd;
    --border-strong:   #d4cbb6;
    --border-stronger: #bdb29a;

    /* --- Elevation --------------------------------------------------------
     * A light surface needs far less shadow than a dark one to separate; the
     * dark theme's `0 10px 30px rgba(0,0,0,.2)` reads as grime on paper. */
    --shadow-card: 0 1px 2px rgba(35, 31, 28, 0.04), 0 6px 16px rgba(35, 31, 28, 0.05);
    --shadow-card-strong: 0 2px 4px rgba(35, 31, 28, 0.05), 0 12px 32px rgba(35, 31, 28, 0.08);
    --scrim: rgba(35, 31, 28, 0.55);   /* modal backdrop */
}