/* ============================================================
   krtffl.dev design system — "night edition / tyrian" v1.0
   tokens.css — THE single source of truth for every value.
   components must reference tokens; raw hex/px in other files
   is a review failure.
   ============================================================ */

/* ---- self-hosted fonts (ch04) — no runtime CDN, font-display:swap ---- */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/bricolage-600-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: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/bricolage-600-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: 800;
    font-display: swap;
    src: url("/fonts/bricolage-800-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: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/bricolage-800-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jetbrains-400-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jetbrains-400-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-500-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-500-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/jetbrains-700-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/jetbrains-700-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;
}

:root {
    /* ---- color: dark (default) ---- */
    --k-bg-0: #0D0A0F;      /* page background */
    --k-bg-1: #171219;      /* panels, hover rows, ticker */
    --k-bg-2: #201A24;      /* inputs, code blocks, kbd */
    --k-line: #2B2230;      /* hairline rules, borders */
    --k-muted: #8E8397;     /* meta, dates, secondary text */
    --k-fg: #D9D3DD;        /* body text */
    --k-bright: #F1EBF4;    /* headlines, masthead */
    --k-accent: #D26A9C;    /* the one pointer */
    --k-accent-hover: #E183AF; /* primary button hover (+8% L) */
    --k-accent-down: #B85688;  /* primary button active (−8% L) */
    --k-on-accent: #0D0A0F; /* text on accent fills */
    --k-accent-2: #A78BC8;  /* links at rest, quiet affordances */
    --k-ok: #86B89A;
    --k-warn: #D9A05C;
    --k-err: #D95C6E;
    --k-hint: #4A4048;      /* pre-hover row hints */

    /* ---- type ---- */
    --k-font-display: "Bricolage Grotesque", sans-serif;
    --k-font-mono: "JetBrains Mono", monospace;

    /* size/leading/tracking triplets — use together, never mix */
    --t-masthead-size: 96px;  --t-masthead-lh: .92; --t-masthead-ls: -.03em; /* 800 */
    --t-display-size: 44px;   --t-display-lh: 1.0;  --t-display-ls: -.02em;  /* 800 */
    --t-title-size: 28px;     --t-title-lh: 1.1;    --t-title-ls: -.015em;   /* 800 */
    --t-heading-size: 19px;   --t-heading-lh: 1.15;                          /* 600 */
    --t-body-size: 14px;      --t-body-lh: 1.75;                             /* 400 */
    --t-meta-size: 12px;      --t-meta-lh: 1.5;                              /* 400 */
    --t-micro-size: 11px;                                                    /* 700 */
    --k-measure: 68ch;        /* max reading width */

    /* ---- spacing (4px base) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* ---- structure ---- */
    --k-rule: 1px solid var(--k-line);       /* hairline */
    --k-rule-accent: 2px solid var(--k-accent); /* statement — max one per region */
    --k-radius: 0px;                          /* never change */
    --k-page-max: 1180px;
    --k-rail-w: 64px;
    --k-aside-w: 300px;
    --k-control-h: 36px;                      /* buttons + inputs */

    /* ---- motion ---- */
    --k-t-fast: .12s linear;                  /* hover tints */
    --k-t-overlay: .15s ease;                 /* search overlay */
    --k-ticker-dur: 60s;
    --k-blink-dur: 1.1s;
}

/* ---- color: light ---- */
/* applied by system preference… */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --k-bg-0: #F5EFF2;
        --k-bg-1: #EDE4E9;
        --k-bg-2: #E4D8E0;
        --k-line: #D3C3CD;
        --k-muted: #7A6C76;
        --k-fg: #3A2F38;
        --k-bright: #2B2029;
        --k-accent: #8A1253;
        --k-accent-hover: #A22268;
        --k-accent-down: #700A42;
        --k-on-accent: #F5EFF2;
        --k-accent-2: #6C4E9B;
        --k-ok: #3E7D5C;
        --k-warn: #9C6420;
        --k-err: #A83248;
        --k-hint: #C4B2BC;
    }
}
/* …or by explicit toggle (t key / theme button), persisted as
   localStorage["k-theme"] = "light" | "dark" and stamped on <html>. */
:root[data-theme="light"] {
    --k-bg-0: #F5EFF2;
    --k-bg-1: #EDE4E9;
    --k-bg-2: #E4D8E0;
    --k-line: #D3C3CD;
    --k-muted: #7A6C76;
    --k-fg: #3A2F38;
    --k-bright: #2B2029;
    --k-accent: #8A1253;
    --k-accent-hover: #A22268;
    --k-accent-down: #700A42;
    --k-on-accent: #F5EFF2;
    --k-accent-2: #6C4E9B;
    --k-ok: #3E7D5C;
    --k-warn: #9C6420;
    --k-err: #A83248;
    --k-hint: #C4B2BC;
}