/* ===========================================================================
   TUNGSTEN SKYLARK — Brand tokens (ts-brand.css)
   Companion to TS-Brand.md v1.0 and TS-Themes.md v0.1.

   - Typography: Chakra Petch (display) + Space Mono (technical), self-hosted
     (SIL Open Font License — see ../fonts/OFL-*.txt).
   - Theme framework: nine themes, each defining the five colour roles for
     light and dark. Appearance (auto / light / dark) resolves the working
     --ts-* variables. Switching theme or appearance is a pure variable swap —
     no layout, type, or behaviour changes.
   - Accent ratio discipline: ~10% maximum amber/gold per screen.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
    font-family: 'Chakra Petch';
    src: url('../fonts/ChakraPetch-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('../fonts/ChakraPetch-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('../fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------- theme definitions
   Five roles per mode (TS-Themes.md §02):
   bg, surface, text, accent, accent-soft — plus the button-label ink.
   Every block applies to any element carrying the data-theme attribute, so
   the same definitions drive both the whole site (on <html>) and the
   swatch cards in the theme library.                                    */

:root,
[data-theme='skylark'] {           /* 1 · the brand base (default) */
    --th-bg-l: #F5F2EC;        --th-bg-d: #232529;
    --th-surface-l: #FFF9F0;   --th-surface-d: #3C3F44;
    --th-text-l: #3C3F44;      --th-text-d: #F5F2EC;
    --th-accent-l: #FFA42B;    --th-accent-d: #FFB24D;
    --th-accent-soft-l: #FFC968; --th-accent-soft-d: #FFC968;
    --th-ink-l: #232529;       --th-ink-d: #232529;   /* dark label on amber */
}
[data-theme='ember'] {             /* 2 · forge red — power */
    --th-bg-l: #F7F2ED;        --th-bg-d: #211C19;
    --th-surface-l: #FFFAF2;   --th-surface-d: #362E29;
    --th-text-l: #3A332F;      --th-text-d: #F6EFE8;
    --th-accent-l: #E4562D;    --th-accent-d: #FF7A4E;
    --th-accent-soft-l: #FF8B5E; --th-accent-soft-d: #FFA277;
    --th-ink-l: #FFFFFF;       --th-ink-d: #211C19;
}
[data-theme='dawn'] {              /* 3 · first light — distinctive */
    --th-bg-l: #EDF1F6;        --th-bg-d: #1C222C;
    --th-surface-l: #F8FAFD;   --th-surface-d: #2C3442;
    --th-text-l: #2D3340;      --th-text-d: #EDF1F7;
    --th-accent-l: #EE6C48;    --th-accent-d: #FF8F68;
    --th-accent-soft-l: #F9A887; --th-accent-soft-d: #FFB695;
    --th-ink-l: #FFFFFF;       --th-ink-d: #1C222C;
}
[data-theme='frost'] {             /* 4 · winter on the fells — focus */
    --th-bg-l: #EFF3F6;        --th-bg-d: #1B2127;
    --th-surface-l: #F9FBFD;   --th-surface-d: #2A323A;
    --th-text-l: #2A3138;      --th-text-d: #E8EEF3;
    --th-accent-l: #3F8EC9;    --th-accent-d: #5AA5DE;
    --th-accent-soft-l: #7CB6DE; --th-accent-soft-d: #8FC6EC;
    --th-ink-l: #FFFFFF;       --th-ink-d: #FFFFFF;
}
[data-theme='harbour'] {           /* 5 · working water — steady */
    --th-bg-l: #ECF3F3;        --th-bg-d: #1A2323;
    --th-surface-l: #F7FCFC;   --th-surface-d: #293433;
    --th-text-l: #293534;      --th-text-d: #E9F1F0;
    --th-accent-l: #187D80;    --th-accent-d: #33A3A5;
    --th-accent-soft-l: #5DB2B3; --th-accent-soft-d: #66BFBF;
    --th-ink-l: #FFFFFF;       --th-ink-d: #FFFFFF;
}
[data-theme='meadow'] {            /* 6 · grassland — daylight */
    --th-bg-l: #F1F4EC;        --th-bg-d: #1F231C;
    --th-surface-l: #FBFDF7;   --th-surface-d: #2E3529;
    --th-text-l: #32372D;      --th-text-d: #EFF3E7;
    --th-accent-l: #5C9C38;    --th-accent-d: #76BE51;
    --th-accent-soft-l: #94C468; --th-accent-soft-d: #A3D67E;
    --th-ink-l: #FFFFFF;       --th-ink-d: #FFFFFF;
}
[data-theme='dusk'] {              /* 7 · the descent — nocturnal */
    --th-bg-l: #F1EFF5;        --th-bg-d: #201D27;
    --th-surface-l: #FBF9FD;   --th-surface-d: #312C3B;
    --th-text-l: #343040;      --th-text-d: #EFEBF5;
    --th-accent-l: #8A55C8;    --th-accent-d: #9C6BD8;
    --th-accent-soft-l: #B489DE; --th-accent-soft-d: #BE93E6;
    --th-ink-l: #FFFFFF;       --th-ink-d: #FFFFFF;
}
[data-theme='rose'] {              /* 8 · the human side of the metal */
    --th-bg-l: #F6F0EF;        --th-bg-d: #231E1E;
    --th-surface-l: #FDF8F7;   --th-surface-d: #352E2E;
    --th-text-l: #3C3130;      --th-text-d: #F6F0EF;
    --th-accent-l: #CC4758;    --th-accent-d: #E86577;
    --th-accent-soft-l: #EF8B97; --th-accent-soft-d: #F2939F;
    --th-ink-l: #FFFFFF;       --th-ink-d: #FFFFFF;
}
[data-theme='ink'] {               /* 9 · pure tungsten — calm */
    --th-bg-l: #F4F4F3;        --th-bg-d: #1D1E20;
    --th-surface-l: #FCFCFC;   --th-surface-d: #2D2F33;
    --th-text-l: #2F2F2E;      --th-text-d: #ECECEC;
    --th-accent-l: #6B6E75;    --th-accent-d: #B5B8BE;
    --th-accent-soft-l: #9A9DA3; --th-accent-soft-d: #D6D8DC;
    --th-ink-l: #FFFFFF;       --th-ink-d: #2F2F2E;   /* dark label on light grey */
}

/* ------------------------------------------------- appearance resolution
   auto  → follows the system (media query)
   light → forces the light set
   dark  → forces the dark set                                             */

:root {
    color-scheme: light dark;

    /* working roles (light by default) */
    --ts-bg: var(--th-bg-l);
    --ts-surface: var(--th-surface-l);
    --ts-text: var(--th-text-l);
    --ts-accent: var(--th-accent-l);
    --ts-accent-soft: var(--th-accent-soft-l);
    --ts-accent-ink: var(--th-ink-l);

    /* derived roles — no theme needs extra colours (TS-Themes.md §02) */
    --ts-text-soft: color-mix(in srgb, var(--ts-text) 62%, transparent);
    --ts-line: color-mix(in srgb, var(--ts-text) 16%, transparent);
    --ts-line-strong: color-mix(in srgb, var(--ts-text) 30%, transparent);
    --ts-glow: color-mix(in srgb, var(--ts-accent-soft) 24%, transparent);
    --ts-glow-strong: color-mix(in srgb, var(--ts-accent-soft) 42%, transparent);

    /* typography (TS-Brand.md §04) */
    --font-display: 'Chakra Petch', 'Avenir Next', 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* 8px layout rhythm (TS-Brand.md §04) */
    --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
    --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
    --content-max: 1160px;      /* below the 1440px web maximum */
    --radius: 12px;
}

html[data-appearance='light'] {
    color-scheme: light;
    --ts-bg: var(--th-bg-l);
    --ts-surface: var(--th-surface-l);
    --ts-text: var(--th-text-l);
    --ts-accent: var(--th-accent-l);
    --ts-accent-soft: var(--th-accent-soft-l);
    --ts-accent-ink: var(--th-ink-l);
}

html[data-appearance='dark'] {
    color-scheme: dark;
    --ts-bg: var(--th-bg-d);
    --ts-surface: var(--th-surface-d);
    --ts-text: var(--th-text-d);
    --ts-accent: var(--th-accent-d);
    --ts-accent-soft: var(--th-accent-soft-d);
    --ts-accent-ink: var(--th-ink-d);
}

@media (prefers-color-scheme: dark) {
    html[data-appearance='auto'],
    html:not([data-appearance]) {
        color-scheme: dark;
        --ts-bg: var(--th-bg-d);
        --ts-surface: var(--th-surface-d);
        --ts-text: var(--th-text-d);
        --ts-accent: var(--th-accent-d);
        --ts-accent-soft: var(--th-accent-soft-d);
        --ts-accent-ink: var(--th-ink-d);
    }
}

/* ------------------------------------------------------------- base text */

body {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ts-text);
    background-color: var(--ts-bg);
    background-image: linear-gradient(
        180deg,
        var(--ts-bg) 0%,
        color-mix(in srgb, var(--ts-accent-soft) 7%, var(--ts-bg)) 100%
    );
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
}