/* ============================================================================
   tokens.css - the single source of colour, type, space, shape and motion for
   BOTH pages (dashboard and editor). Linked first, before style.css /
   editor.css.

   Design contract:
   - LIGHT is the base. script.js boots with themeMode 'light', so the default
     experience needs no cascade patch. Only dark overrides, via body.theme-off.
   - 'fun' mode sets no theme class at all, so it inherits the light tokens and
     sits on OPAQUE surfaces over seasonal.css's page gradient.
   - Surfaces are opaque. A translucent surface has no knowable contrast ratio,
     which is how the old light theme ended up with 1.11:1 buttons.
   - One accent, for selected state and focus only.
   - Depth comes from hairlines, not shadow. Exactly one shadow token exists,
     for the one element that genuinely floats.

   Every ratio quoted in a comment here is asserted by the Playwright contrast
   suite across both pages.
   ============================================================================ */

:root {
    /* Type - wall-display first. Content outranks chrome. */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --t-caption: 0.75rem;
    --t-meta:    0.875rem;
    --t-ui:      0.9375rem;
    --t-body:    1.0625rem;
    --t-title:   1.5rem;
    --t-card:    clamp(1.25rem, 0.9rem + 1vw, 1.875rem);
    --t-section: clamp(1.5rem,  1.1rem + 1.2vw, 2.25rem);
    --t-count:   clamp(1.5rem,  1.05rem + 1.2vw, 2.25rem);

    --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;
    --track-tight: -0.02em;
    --track-wide: 0.08em;
    --lh-tight: 1.05;
    --lh-body: 1.45;

    /* Space */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem;
    --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;

    /* Shape */
    --r-1: 4px;
    --bw: 1px;
    --bw-cap: 3px;
    --shadow-1: 0 2px 8px rgba(15, 18, 22, 0.18);

    /* Motion */
    --dur-1: 120ms; --dur-2: 200ms; --dur-slide: 500ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* Colour - light is the base. Ratios verified, see comments. */
    color-scheme: light;
    --paper:       #eceeef;
    --surface:     #ffffff;
    --surface-2:   #f5f6f7;
    --rule:        #d3d7da;   /* decorative hairline */
    --rule-strong: #7e858c;   /* 3.74:1 on --surface - kept for edges that must
                                 be seen: Gantt major gridlines, the floating
                                 tooltip, and every hover state */
    --ink:         #15181c;   /* 17.81:1 on --surface */
    --ink-2:       #474d55;   /*  8.53:1 */
    --ink-3:       #5b626b;   /*  6.17:1 - replaces every opacity: 0.x */
    --accent:      #1d4ed8;   /* 6.70:1 behind white, 6.70:1 as text */
    --accent-ink:  #ffffff;
    --accent-wash: #e8edfb;
    --danger:      #a4161a;   /* 7.75:1 behind white */
    --danger-ink:  #ffffff;
    --warn-bg:     #fbf1d5;
    --warn-ink:    #6b4200;   /* 7.75:1 on --warn-bg */
    --warn-rule:   #b98d24;

    /* Category tint weight - theme-owned, so all 12 hues match in weight */
    --cat-s: 38%; --cat-l: 38%; --cat-wash: 14%;
}

body.theme-off {
    color-scheme: dark;
    --paper:       #12141a;
    --surface:     #1b1f26;
    --surface-2:   #161a20;
    --rule:        #2d323b;
    --rule-strong: #606a77;   /* 3.01:1 on --surface */
    --ink:         #f1f3f5;   /* 14.86:1 */
    --ink-2:       #c3c9d1;   /*  9.91:1 */
    --ink-3:       #9aa2ac;   /*  6.40:1 */
    --accent:      #7aa2ff;   /* note the flip: dark ink on a light accent */
    --accent-ink:  #0b0e13;   /* 7.77:1 */
    --accent-wash: #16233a;
    --danger:      #ff8d85;   /* 7.40:1 as text on --surface */
    --danger-ink:  #1a0b0a;
    --warn-bg:     #3a2e12;
    --warn-ink:    #ffd479;   /* 9.46:1 */
    --warn-rule:   #7a6320;
    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.5);
    --cat-s: 45%; --cat-l: 62%; --cat-wash: 20%;
}