/* Twain OS tokens. Usage and rules: DESIGN.md. Every component and phase live: library.html.
   The palette follows the sun: sun.js sets data-phase on <html> from the sun's elevation where Markus is.
   data-phase on any element previews that phase inside it. The names from Claude Design (--ink, --surface,
   --tray, --primary-bg, --st-ok-bg ...) are the main names. The cockpit's old names (--bg, --panel, --text,
   --accent ...) are aliases at the end of the shared block, so a page switches by linking this file.
   Blocks: 1 constants, 2 shared (light values), 3 dark phases, 4 one block per phase. */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Constants: the same in every phase ---------- */
:root {
  --coal: #2C2C2C;     /* measured from design/references */
  --green: #18BB58;    /* success dot, toast icon */
  --lilac: #ACAEF3;    /* medium priority: dots and edges */
  --stone: #A8A395;    /* idle dot */

  --font-sans: "Outfit", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --fw-thin: 200;      /* KPI numbers */
  --fw-light: 300;     /* titles */
  --fw-regular: 400;   /* body, buttons */
  --fw-medium: 500;    /* labels, toast titles */
  --fs-kpi: 64px;
  --fs-display: 52px;
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 19px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --tracking-display: -0.02em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  --r-shell: 40px;     /* the glass frame */
  --r-panel: 32px;     /* trays, tab panels */
  --r-card: 24px;
  --r-tile: 16px;      /* info tiles, alerts, rows */
  --r-sm: 10px;        /* tags */
  --r-xs: 6px;         /* checkbox, kbd */
  --r-pill: 999px;     /* everything you can press */

  --ctl-h: 40px;
  --ctl-h-sm: 32px;
  --ctl-h-lg: 48px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;        /* hover, tooltips, toggles */
  --dur-slow: 420ms;   /* toasts */
  --dur-loop: 1.6s;    /* shimmer, pulse, line loader */
}

/* ---------- 2. Shared: light values, derived tokens and the cockpit's names ---------- */
:root, [data-phase] {
  color-scheme: light;
  --surface-raised: #FFFFFF;          /* search, chips, icon buttons, selected pill */
  --hairline: rgb(44 44 44 / 8%);
  --dotted: rgb(44 44 44 / 24%);      /* dotted dividers, control edges, decoration */

  --ink: #2C2C2C;
  --ink-2: #4A4640;
  --muted: #5D574C;                   /* secondary text, 5:1 on every surface */
  --faint: #676155;                   /* labels, axes, placeholders, 4.5:1 on every surface */

  /* Butter means "waits for you": selected row, active count, high priority, first data series.
     Claude Design called it --accent; here --accent keeps the cockpit's meaning (the action colour). */
  --butter: #FDD861;
  --butter-strong: #FCCF45;
  --butter-soft: #FDF1C8;
  --butter-ink: #2C2C2C;              /* text on butter */
  --butter-text: #7A5C00;             /* butter-family text on light surfaces */

  /* Buttons, active pill, tooltip: coal by day, cream at night (from Claude Code) */
  --primary-bg: #2C2C2C;
  --primary-fg: #FFFFFF;
  --primary-hover: #4C4C4C;

  /* Status. Red means an error and nothing else. */
  --st-ok-bg: #E7F5CF;   --st-ok-fg: #2E6B1E;   --st-ok-dot: var(--green);
  --st-fail-bg: #FBE6E2; --st-fail-fg: #A8281C; --st-fail-dot: #D9483B;
  --st-idle-bg: #ECEAE3; --st-idle-fg: #5A564D; --st-idle-dot: var(--stone);
  --st-wait-bg: var(--butter); --st-wait-fg: var(--butter-ink); --st-wait-dot: var(--butter-ink);
  --st-run-bg: var(--surface-2); --st-run-fg: var(--ink); --st-run-dot: var(--ink);
  --mid: #4B4EB0;                     /* medium priority, tier 3: text */
  --mid-bg: #ECEDFC;

  /* Charts */
  --series-1: var(--butter);
  --series-1-line: #E8BD3A;           /* butter deep enough to see as a 3 px line on cream */
  --series-2: var(--ink);
  --series-3: #C9C4B4;
  --series-track: #EAE5D3;
  --matrix-bg: #262625;
  --matrix-off: #3A3A37;
  --matrix-on: var(--butter);
  --matrix-ink: #FBF8EE;
  --matrix-muted: #ADA799;

  /* Depth only on what floats: command field, toast, tooltip, menus. xs is a 1 px edge on white controls. */
  --shadow-xs: 0 1px 2px rgb(60 48 10 / 6%);
  --shadow-md: 0 4px 12px rgb(60 48 10 / 6%), 0 18px 44px rgb(60 48 10 / 11%);

  --shell: color-mix(in srgb, var(--surface) 64%, transparent);
  --shell-edge: inset 0 0 0 1px rgb(255 255 255 / 55%);
  --hover: color-mix(in srgb, var(--ink) 7%, transparent);   /* hover on any tone */

  /* The cockpit's names (styles.css). tests/test_design.py checks that none is missing. */
  --bg-2: var(--tray);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --line: var(--hairline);
  --line-2: var(--dotted);
  --text: var(--ink);
  --accent: var(--primary-bg);
  --accent-2: var(--primary-hover);
  --accent-ink: var(--primary-fg);
  --ok: var(--st-ok-fg);
  --warn: var(--butter-text);
  --bad: var(--st-fail-fg);
  --info: var(--muted);
  --t1: var(--ink);                   /* N1 Direkte */
  --t2: var(--butter-text);           /* N2 Lett */
  --t3: var(--mid);                   /* N3 Arbeid */
  --radius: var(--r-card);
  --radius-sm: var(--r-tile);
  --shadow: var(--shadow-xs);
  --shadow-float: var(--shadow-md);
  --ease: var(--ease-out);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
}

/* ---------- 3. Dark phases: before sunrise, after sunset and at night ---------- */
[data-phase="tidlig-soloppgang"], [data-phase="skumring"], [data-phase="natt"] {
  color-scheme: dark;
  --hairline: rgb(242 239 228 / 9%);
  --dotted: rgb(242 239 228 / 26%);
  --ink: #F2EFE4;
  --ink-2: #D9D5C8;
  --butter: #E3D89A;                  /* moon butter: calmer at night */
  --butter-strong: #EDE3A8;
  --butter-soft: color-mix(in srgb, #E3D89A 13%, var(--surface));
  --butter-ink: #1F2230;
  --butter-text: #E8D98F;
  --primary-bg: #F2EFE4;
  --primary-fg: #2C2C2C;
  --primary-hover: #D9D5C8;
  --st-ok-bg: color-mix(in srgb, #3FCB73 20%, var(--surface));   --st-ok-fg: #A3E2B7; --st-ok-dot: #3FCB73;
  --st-fail-bg: color-mix(in srgb, #F0685A 20%, var(--surface)); --st-fail-fg: #FFB0A4; --st-fail-dot: #F0685A;
  --st-idle-bg: color-mix(in srgb, #9EA2B4 16%, var(--surface)); --st-idle-fg: #C3C5CF; --st-idle-dot: #8C90A3;
  --mid: #C9CBF8;
  --mid-bg: color-mix(in srgb, #ACAEF3 20%, var(--surface));
  --series-1-line: var(--butter);
  --series-3: #6E7388;
  --series-track: color-mix(in srgb, #F2EFE4 12%, var(--surface));
  --matrix-bg: #22252F;
  --matrix-off: #363B4C;
  --matrix-ink: #E6E4DA;
  --matrix-muted: #A9ADBE;
  --shadow-xs: 0 1px 2px rgb(8 10 20 / 30%);
  --shadow-md: 0 4px 12px rgb(8 10 20 / 30%), 0 18px 44px rgb(8 10 20 / 42%);
  --shell: color-mix(in srgb, var(--surface) 72%, transparent);
  --shell-edge: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

/* ---------- 4. The nine phases, in the sun's order. Thresholds in sun.js. --sky is the phase's own colour, for the sun strip. ---------- */
[data-phase="natt"] {
  --bg: #252836; --tray: #2A2E3D; --surface: #2E3242; --surface-2: #383D50; --surface-raised: #3E4359;
  --muted: #B9BDCB; --faint: #AEB2C1; --sky: #2B3150;
  --bg-gradient: radial-gradient(55% 50% at 88% 6%, rgb(227 216 154 / 9%), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgb(120 132 180 / 13%), transparent 70%);
}
[data-phase="tidlig-soloppgang"] {
  --bg: #2B304D; --tray: #303655; --surface: #353B5A; --surface-2: #3F4565; --surface-raised: #454C6C;
  --muted: #C8C9D6; --faint: #BDBFCE; --sky: #5D6394;
  --bg-gradient: radial-gradient(75% 60% at 100% 100%, rgb(244 170 150 / 20%), transparent 70%),
    radial-gradient(55% 45% at 0% 0%, rgb(150 170 240 / 12%), transparent 70%);
}
[data-phase="soloppgang"] {
  --bg: #FAF3EE; --tray: #EDE2D9; --surface: #FFFBF8; --surface-2: #F4E9E1; --sky: #F4B79B;
  --bg-gradient: radial-gradient(70% 55% at 100% 100%, rgb(249 176 138 / 26%), transparent 70%),
    radial-gradient(55% 50% at 92% 4%, rgb(253 216 97 / 14%), transparent 70%);
}
[data-phase="sen-soloppgang"] {
  --bg: #FAFAF1; --tray: #EAE8DB; --surface: #FEFEF8; --surface-2: #F1F0E3; --sky: #EDE7B4;
  --bg-gradient: radial-gradient(60% 55% at 92% 4%, rgb(245 221 140 / 24%), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgb(196 222 186 / 24%), transparent 70%);
}
:root:not([data-phase]), [data-phase="dag"] { /* dag is also the default before sun.js has run */
  --bg: #F9F6EB; --tray: #ECE8D8; --surface: #FDFCF9; --surface-2: #F3EFE0; --sky: #FBE5A0;
  --bg-gradient: radial-gradient(60% 55% at 92% 4%, rgb(253 216 97 / 24%), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgb(246 216 112 / 16%), transparent 70%);
}
[data-phase="ettermiddag"] {
  --bg: #FAF4E7; --tray: #EDE4D1; --surface: #FEFAF2; --surface-2: #F4EBD9; --sky: #F7D28A;
  --bg-gradient: radial-gradient(60% 55% at 92% 4%, rgb(248 198 110 / 24%), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgb(245 180 100 / 14%), transparent 70%);
}
[data-phase="tidlig-solnedgang"] {
  --bg: #FAF0E2; --tray: #EDDDC8; --surface: #FEF8EF; --surface-2: #F4E4CF; --sky: #F1B066;
  --bg-gradient: radial-gradient(65% 60% at 100% 72%, rgb(242 176 96 / 27%), transparent 70%),
    radial-gradient(50% 45% at 80% 0%, rgb(253 216 97 / 12%), transparent 70%);
}
[data-phase="solnedgang"] {
  --bg: #F9EEEA; --tray: #ECDBD3; --surface: #FEF9F7; --surface-2: #F3E2DB; --sky: #E98C74;
  --bg-gradient: radial-gradient(70% 55% at 100% 100%, rgb(238 140 110 / 24%), transparent 70%),
    radial-gradient(55% 50% at 0% 0%, rgb(196 150 200 / 14%), transparent 70%);
}
[data-phase="skumring"] {
  --bg: #312A40; --tray: #372F47; --surface: #3C344D; --surface-2: #463E59; --surface-raised: #4D4460;
  --muted: #C4C0CF; --faint: #BBB6C7; --sky: #6E4F78;
  --bg-gradient: radial-gradient(75% 60% at 100% 100%, rgb(230 130 110 / 18%), transparent 70%),
    radial-gradient(55% 45% at 20% 0%, rgb(160 130 210 / 12%), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-fast: 1ms; --dur-slow: 1ms; }
}