/* system.css - the console's design system (Direction A, Josh's pick, Sep 14
   2026; the sheet is design/product-look/System.dc.html).

   Four themes, each light and dark: Graphite (default), Gold, Harbor, Sage.
   A theme is a full palette - paper, surfaces, lines and ink tint toward its
   accent - not a coat of paint on one color. Every theme sets the console's
   own token names (--paper, --surface, --ink, --gold as the accent, --jade
   as good, --clay as critical...) so thirteen thousand lines of existing
   screens pick the look up as they are, plus the new names the modules use
   (--accent, --accent-ink, --good, --warn, --crit, --line2).

   Loaded after the console's inline styles, so a rule here wins a tie.
   Three theme states, the console's rule: bare :root is light, the dark
   media query guarded by :not([data-theme="light"]), and data-theme="dark"
   wins either way. Tokens are declared on dialog too (iOS top layer). */

:root, dialog {
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --lfb-mono: var(--mono);
  --lfb-display: var(--display);
  --r: 6px;
}

/* ---- light palettes -------------------------------------------------- */
:root, :root dialog, :root[data-theme="light"], :root[data-theme="light"] dialog {
  color-scheme: light;
  --paper:#F4F6F7; --surface:#FFFFFF; --surface2:#EBEFF1; --line:#D5DCE0; --line2:#E7ECEF;
  --ink:#0F1720; --ink2:#4A5561; --ink3:#7C8791;
  --accent:#0B7285; --accent-ink:#FFFFFF;
  --good:#1F8A5B; --warn:#B7791F; --crit:#C0392B; --sky:#0B6E99; --violet:#6552C8;
}
:root[data-skin="gold"], :root[data-skin="gold"] dialog,
:root[data-skin="gold"][data-theme="light"], :root[data-skin="gold"][data-theme="light"] dialog {
  --paper:#F6F3EC; --surface:#FFFDF8; --surface2:#EEE8DB; --line:#DCD3C0; --line2:#E9E3D6;
  --ink:#17140E; --ink2:#55503F; --ink3:#857E6C;
  --accent:#B8791F; --accent-ink:#1A1206;
}
:root[data-skin="harbor"], :root[data-skin="harbor"] dialog,
:root[data-skin="harbor"][data-theme="light"], :root[data-skin="harbor"][data-theme="light"] dialog {
  --paper:#F2F5F9; --surface:#FFFFFF; --surface2:#E7EDF4; --line:#CDD8E4; --line2:#E1E8F0;
  --ink:#0E1826; --ink2:#47556A; --ink3:#778699;
  --accent:#2F5FD0; --accent-ink:#FFFFFF;
}
:root[data-skin="sage"], :root[data-skin="sage"] dialog,
:root[data-skin="sage"][data-theme="light"], :root[data-skin="sage"][data-theme="light"] dialog {
  --paper:#F1F4F1; --surface:#FFFFFF; --surface2:#E5ECE6; --line:#CFDAD2; --line2:#E1E9E3;
  --ink:#0F1B15; --ink2:#48584F; --ink3:#78887F;
  --accent:#2E7D5B; --accent-ink:#FFFFFF;
}

/* ---- dark palettes --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) dialog {
    color-scheme: dark;
    --paper:#0B1014; --surface:#121A20; --surface2:#18232B; --line:#243038; --line2:#1C2830;
    --ink:#E9EEF2; --ink2:#A7B3BD; --ink3:#74818C;
    --accent:#3FB8CE; --accent-ink:#06141A;
    --good:#4CC38A; --warn:#E2B04A; --crit:#F07167; --sky:#7CC7EA; --violet:#A79BE8;
  }
  :root[data-skin="gold"]:not([data-theme="light"]), :root[data-skin="gold"]:not([data-theme="light"]) dialog {
    --paper:#121009; --surface:#1A1710; --surface2:#221E14; --line:#37311F; --line2:#2B261A;
    --ink:#F1ECE0; --ink2:#B9B09A; --ink3:#85805F;
    --accent:#E3A759; --accent-ink:#1A1206;
  }
  :root[data-skin="harbor"]:not([data-theme="light"]), :root[data-skin="harbor"]:not([data-theme="light"]) dialog {
    --paper:#0A1018; --surface:#111A26; --surface2:#172230; --line:#24344A; --line2:#1B2838;
    --ink:#E6EDF6; --ink2:#A3B2C6; --ink3:#6E7E93;
    --accent:#6D9BFF; --accent-ink:#061020;
  }
  :root[data-skin="sage"]:not([data-theme="light"]), :root[data-skin="sage"]:not([data-theme="light"]) dialog {
    --paper:#0A1210; --surface:#111C17; --surface2:#16241E; --line:#23362C; --line2:#1B2A23;
    --ink:#E7EFEA; --ink2:#A4B5AB; --ink3:#6F8177;
    --accent:#5BC48F; --accent-ink:#06140D;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] dialog {
  color-scheme: dark;
  --paper:#0B1014; --surface:#121A20; --surface2:#18232B; --line:#243038; --line2:#1C2830;
  --ink:#E9EEF2; --ink2:#A7B3BD; --ink3:#74818C;
  --accent:#3FB8CE; --accent-ink:#06141A;
  --good:#4CC38A; --warn:#E2B04A; --crit:#F07167; --sky:#7CC7EA; --violet:#A79BE8;
}
:root[data-skin="gold"][data-theme="dark"], :root[data-skin="gold"][data-theme="dark"] dialog {
  --paper:#121009; --surface:#1A1710; --surface2:#221E14; --line:#37311F; --line2:#2B261A;
  --ink:#F1ECE0; --ink2:#B9B09A; --ink3:#85805F;
  --accent:#E3A759; --accent-ink:#1A1206;
}
:root[data-skin="harbor"][data-theme="dark"], :root[data-skin="harbor"][data-theme="dark"] dialog {
  --paper:#0A1018; --surface:#111A26; --surface2:#172230; --line:#24344A; --line2:#1B2838;
  --ink:#E6EDF6; --ink2:#A3B2C6; --ink3:#6E7E93;
  --accent:#6D9BFF; --accent-ink:#061020;
}
:root[data-skin="sage"][data-theme="dark"], :root[data-skin="sage"][data-theme="dark"] dialog {
  --paper:#0A1210; --surface:#111C17; --surface2:#16241E; --line:#23362C; --line2:#1B2A23;
  --ink:#E7EFEA; --ink2:#A4B5AB; --ink3:#6F8177;
  --accent:#5BC48F; --accent-ink:#06140D;
}

/* ---- the console's older names, mapped ------------------------------- */
:root, dialog, :root[data-skin], :root[data-skin] dialog, :root[data-theme], :root[data-theme] dialog {
  --gold: var(--accent);
  --jade: var(--good);
  --clay: var(--crit);
  --goldbg: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --jadebg: color-mix(in srgb, var(--good) 14%, var(--surface));
  --claybg: color-mix(in srgb, var(--crit) 14%, var(--surface));
  --violetbg: color-mix(in srgb, var(--violet) 14%, var(--surface));
  --skybg: color-mix(in srgb, var(--sky) 14%, var(--surface));
  --lfb-bar: color-mix(in srgb, var(--accent) 38%, var(--surface2));
  --lfb-track: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
/* board.css sets its own type tokens on .lfb/.lfd; the system's faces win. */
.lfb, .lfd {
  --lfb-mono: var(--mono);
  --lfb-display: var(--display);
  --lfb-bar: color-mix(in srgb, var(--accent) 38%, var(--surface2));
  --lfb-track: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

/* ---- type ------------------------------------------------------------ */
body, button, input, select, textarea, .btn, .chip, .fchip, .navbtn, .themebtn, .search { font-family: var(--ui); }
body { font-size: 14px; }
.brand, .sh h2, .card h1, .stat .v, .lfb-big, .price, h1.brand { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.brand { font-size: 19px; }
.mono, .stat .k, .lrow .req, .meta, .lfb-kicker, .lfb-stamp, .lfb-kv dd, .lfb-n, .lfb-days, .lfd-cv, .lfd-cp, .seo-v, .seo-acct, .num,
table.buy th, table.buy td.n, .pill, .tag { font-family: var(--mono); }
.secthead h2, .lfd .card h3, .lfd .sqz > h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
}
.lfb-kicker { color: var(--ink3); letter-spacing: .12em; font-weight: 500; }
.lfb-kicker span { color: var(--ink3); }
.stat .k { letter-spacing: .1em; }

/* ---- surfaces and edges ---------------------------------------------- */
header { background: var(--surface); border-bottom: 1px solid var(--line); }
.card, .ordercard, .stat, .lfb-panel, .lfd .card, .lfd .sqz, .sqz, .terms { border-radius: var(--r); box-shadow: none; }
:root[data-skin] .lfd .card { border-radius: var(--r); }
.card { border: 1px solid var(--line); }
input, textarea, select, .search { border-radius: var(--r); }
input:focus, textarea:focus, select:focus, .search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
table.buy th { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; color: var(--ink3); }

/* ---- controls -------------------------------------------------------- */
.btn { background: var(--accent); color: var(--accent-ink); border-radius: var(--r); padding: 9px 14px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:disabled { background: var(--surface2); color: var(--ink3); border-color: var(--line); filter: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); border-color: var(--accent); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn:focus-visible, .chip:focus-visible, .fchip:focus-visible, .navbtn:focus-visible, .themebtn:focus-visible, .search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navbtn { border-radius: var(--r); font-weight: 500; }
.navbtn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); border-color: var(--accent); }
.navtile { border-radius: var(--r); }
.chip { border-radius: var(--r); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); border-color: var(--accent); }
.fchip { border-radius: var(--r); font-weight: 500; }
.fchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }
.fchip.on .n { color: var(--ink2); }
.themebtn { border-radius: var(--r); }
.themebtn.on { color: var(--accent); border-color: var(--accent); }
.pill, .tag { font-weight: 500; letter-spacing: .06em; border-radius: 4px; }
.smitem[aria-pressed="true"], .smitem.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.lfb-bars .lfb-b.lfb-hi, .lfd-chan.lfd-top1 .lfb-t > i { background: var(--accent); }
.lfb-big.lfb-gold, .lfb-big small { color: var(--accent); }