/* ==========================================================
   PLATFORM — design system
   ----------------------------------------------------------
   ONE COLOUR CONTROLS THE PRODUCT
   Change --brand and every button, active state, chart series,
   focus ring and selected row follows. The plain hexes are the
   fallback; the @supports block derives them from --brand
   wherever color-mix() exists.

   The brand is the mint from the reference: its 30% tint is
   exactly #C3F2E8. Mint is a light colour — white on it is
   1.9:1, so text that sits on the brand uses --on-brand, a
   dark ink at 8:1.

   Scale: 8px. Every space, gap and pad is a multiple of it.
   ========================================================== */

:root {
    --brand: #37D3B2;
    --on-brand: #0B2B24;

    --brand-05: #F0FCF9;
    --brand-10: #E2F9F3;
    --brand-20: #CFF5EC;
    --brand-40: #A3EBDA;
    --brand-70: #22A184;
    --brand-ink: #0C5F4D;

    --paper:   #FFFFFF;
    --canvas:  #FAFCFB;
    --sunk:    #F1F7F5;
    --line:    #DFEAE7;
    --line-2:  #EDF4F2;

    --ink:     #16211E;
    --ink-2:   #4E5B57;
    --ink-3:   #7F8D88;

    --good:     #1F7A46;  --good-bg: #E9F5EE;
    --caution:  #A66A00;  --caution-bg: #FDF3E0;
    --harm:     #B3372A;  --harm-bg: #FCEDEB;
    --info:     #1F5B94;  --info-bg: #EAF1F8;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
    --r1: 6px; --r2: 10px; --r3: 14px; --r-pill: 999px;
    /* Labels, tags, badges and counts. Square with a softened corner
       rather than a capsule: a rectangle sits in a row of text without
       drawing attention to its own shape, which is what a label is for. */
    --r-label: 4px;

    --lift-1: 0 1px 2px rgba(20,32,29,.06);
    --lift-2: 0 4px 16px -6px rgba(20,32,29,.16);

    --rail: 248px;
}

[data-theme="dark"] {
    --on-brand: #08221C;
    --brand-05: #14251F;
    --brand-10: #1A3129;
    --brand-20: #234337;
    --brand-40: #2E6455;
    --brand-70: #5FE0C4;
    --brand-ink: #7FE8CF;

    --paper:   #16191A;
    --canvas:  #0F1213;
    --sunk:    #1D2223;
    --line:    #2A3132;
    --line-2:  #222829;

    --ink:     #E9EFED;
    --ink-2:   #AAB6B2;
    --ink-3:   #7A8783;

    --good:     #63C58E;  --good-bg: #142C1F;
    --caution:  #E0A94E;  --caution-bg: #2E2412;
    --harm:     #EE8B7E;  --harm-bg: #33201D;
    --info:     #7FB0E4;  --info-bg: #172733;

    --lift-1: 0 1px 2px rgba(0,0,0,.45);
    --lift-2: 0 4px 16px -6px rgba(0,0,0,.6);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --brand-05:  color-mix(in srgb, var(--brand)  8%, white);
        --brand-10:  color-mix(in srgb, var(--brand) 16%, white);
        --brand-20:  color-mix(in srgb, var(--brand) 30%, white);
        --brand-40:  color-mix(in srgb, var(--brand) 55%, white);
        --brand-70:  color-mix(in srgb, var(--brand) 74%, black);
        --brand-ink: color-mix(in srgb, var(--brand) 45%, black);
        --canvas:    color-mix(in srgb, var(--brand)  3%, #FBFCFC);
        --sunk:      color-mix(in srgb, var(--brand)  9%, #F3F5F5);
        --line:      color-mix(in srgb, var(--brand) 11%, #E5EAE9);
        --line-2:    color-mix(in srgb, var(--brand)  6%, #EFF3F2);
    }
    [data-theme="dark"] {
        --brand-05:  color-mix(in srgb, var(--brand) 10%, #16191A);
        --brand-10:  color-mix(in srgb, var(--brand) 18%, #16191A);
        --brand-20:  color-mix(in srgb, var(--brand) 30%, #16191A);
        --brand-40:  color-mix(in srgb, var(--brand) 50%, #16191A);
        --brand-70:  color-mix(in srgb, var(--brand) 82%, white);
        --brand-ink: color-mix(in srgb, var(--brand) 72%, white);
        --sunk:      color-mix(in srgb, var(--brand)  7%, #1C2021);
        --line:      color-mix(in srgb, var(--brand) 10%, #282E2F);
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px; line-height: 1.5;
    background: var(--canvas); color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.014em; }
a { color: var(--brand-ink); }
button { font: inherit; }

/* Focus is visible everywhere and always the brand — a keyboard user
   should never have to hunt for where they are. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r1);
}

.a-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
          overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link — first thing a keyboard reaches, invisible until focused. */
.a-skip {
    position: absolute; left: var(--s4); top: -48px; z-index: 100;
    padding: var(--s2) var(--s4); border-radius: var(--r1);
    background: var(--brand); color: var(--on-brand); font-weight: 650;
    transition: top .12s ease;
}
.a-skip:focus { top: var(--s4); }