/* =============================================================================
   Pigeon Effect — colour tokens (the one place a site colour is defined)
   -----------------------------------------------------------------------------
   Every value is an `R G B` triplet, not a hex, so one token serves every
   alpha: plain CSS writes rgb(var(--pe-ink)) or rgb(var(--pe-ink) / .14), and
   tailwind.config.js maps each token to `rgb(var(--pe-x) / <alpha-value>)`, so
   bg-paper, text-ink-3 and border-ink/15 all work. (A var() holding a hex
   cannot take Tailwind's opacity modifier: `bg-[var(--x)]/95` compiles to
   nothing, which once left the header light in dark mode.)

   Light mode is ink on warm paper; dark mode swaps the two. The chrome
   (header + footer) is the same deep ink in both, edged by a hairline of the
   accent, so it parts from any page ground, including the Derailment Log's
   descent to black.

   Contrast (WCAG 2.x), measured on paper / surface / sunken:
     light  ink 12.6 / 13.5 / 11.4   ink-2 6.6 / 7.1 / 6.0   ink-3 5.4 / 5.8 / 4.9
            accent-text 5.2 / 5.6 / 4.7   accent-strong 4.0 / 4.3 / 3.6 (marks, focus, large type)
            accent 2.7 / 2.9 / 2.5 (fills and rules only, never text)
     dark   ink 12.6 / 10.9 / 14.0   ink-2 8.9 / 7.7 / 9.9   ink-3 6.1 / 5.3 / 6.7
            accent-text 6.9 / 5.9 / 7.6   accent-strong 5.7 / 5.0 / 6.3   accent 4.6 / 4.0 / 5.1
     chrome on-chrome 15.3   on-chrome-2 8.4   accent 5.6
     buttons on-accent on accent 5.6, on accent-hover 6.7
   .pe-theme-light / .pe-theme-dark pin a subtree to one theme whatever the
   page is in (the style preview shows both side by side).
   ============================================================================= */
:root, .pe-theme-light {
    /* grounds */
    --pe-paper:   245 241 232;   /* #F5F1E8  body */
    --pe-surface: 253 252 249;   /* #FDFCF9  cards, panels (never pure white) */
    --pe-sunken:  236 230 217;   /* #ECE6D9  chips, inputs, thumbnail plates */

    /* ink */
    --pe-ink:   35 43 58;        /* #232B3A  text, headings */
    --pe-ink-2: 77 85 102;       /* #4D5566  secondary text */
    --pe-ink-3: 92 99 113;       /* #5C6371  meta, labels, input borders */
    --pe-line:  35 43 58;        /* = ink; used at 12-16% for hairlines */

    /* chrome: header + footer, same in both themes */
    --pe-chrome:      22 27 36;    /* #161B24 */
    --pe-on-chrome:   245 241 232; /* #F5F1E8 */
    --pe-on-chrome-2: 183 181 177; /* #B7B5B1  inactive nav, fine print */

    /* accent: the Derailment Log orange, in three weights */
    --pe-accent:        238 108 30;  /* #EE6C1E  fills, rules, active nav on chrome */
    --pe-accent-strong: 201 80 15;   /* #C9500F  focus rings, large numerals, marks */
    --pe-accent-text:   173 67 9;    /* #AD4309  orange text on page grounds */
    --pe-on-accent:     22 27 36;    /* #161B24  text on an accent fill */
    --pe-accent-hover:  239 135 70;  /* #EF8746  accent fill on hover (6.7:1 with on-accent) */

    /* data only, never UI */
    --pe-down:    178 75 62;     /* #B24B3E  negative values */
    --pe-up:      45 122 88;     /* #2D7A58  positive values */
    --pe-measure: 91 110 224;    /* #5B6EE0  magnitude bars (the old indigo) */
}

html.dark, .pe-theme-dark {
    --pe-paper:   35 43 58;      /* #232B3A */
    --pe-surface: 44 53 69;      /* #2C3545 */
    --pe-sunken:  28 35 48;      /* #1C2330 */

    --pe-ink:   245 241 232;     /* #F5F1E8 */
    --pe-ink-2: 201 205 212;     /* #C9CDD4 */
    --pe-ink-3: 163 170 182;     /* #A3AAB6 */
    --pe-line:  245 241 232;

    --pe-accent-strong: 240 138 75;  /* #F08A4B */
    --pe-accent-text:   245 160 106; /* #F5A06A */

    --pe-down:    229 138 121;   /* #E58A79  (dashboard #DE7A68 was 4.2 on dark surface) */
    --pe-up:      106 197 148;   /* #6AC594 */
    --pe-measure: 139 152 236;   /* #8B98EC */
}