/* ============================================================================ Thesis.ai — canonical design system Single source of truth for color, type, radius, shadow, motion. Every page links this FIRST, then layers page-specific component CSS. Dark mode: set [data-theme="dark"] on (see static/js/theme.js). Page-specific *categorical* palettes (e.g. mad-study chart hues) stay local. ============================================================================ */ :root { /* ── Ink / text ── */ --ink:#1C1C1A; --ink-2:#5B5B57; --ink-3:#8A8A84; --ink-4:#B5B5AE; --ink-muted:#9A9A95; /* ── Lines / surfaces ── */ --line:#ECECE8; --line-2:#F2F2EE; --surface:#FFFFFF; --canvas:#FCFCFB; --canvas-2:#F5F5F2; /* ── Brand ── (aligned to the Field product accent: cobalt) ── */ --brand:#3A2BE0; --brand-hover:#2D20B8; --brand-tint:#EDEBFC; --brand-line:#D2CDF7; /* ── Semantic verdict / status ── */ --supported:#1F7A4D; --supported-tint:#E9F4EE; --refuted:#C0392F; --refuted-tint:#FAEDEB; --incomplete:#B07314; --incomplete-tint:#FBF1DF; --incomplete-ink:#6B4E0F; /* AA-contrast amber for body text on --incomplete-tint */ --info:#2B6CB0; --info-tint:#EAF1F8; /* ── Debate agent roles ── */ --prosecutor:#C0392F; --defender:#2B6CB0; --referee:#7C5CBF; /* ── Content accents (marketing / docs / benchmark) ── */ --green:#2E9E6B; --green-bg:#E7F4EC; --amber:#B7791F; --amber-bg:#FBF3E2; --rose:#BE463C; --rose-bg:#FAECF1; /* ── On-fills (foreground that sits on a saturated/dark fill) ── */ --on-brand:#FFFFFF; --on-ink:#FFFFFF; /* ── Verdict borders (pair with the matching *-tint backgrounds) ── */ --supported-line:#A8D4BD; --refuted-line:#F5C7C4; --incomplete-line:#F5DFA0; --incomplete-line-2:#EAD6A8; --referee-tint:#F3ECFB; /* ── Extended content accents (charts / domain tiles only; role UI should prefer --prosecutor/--defender/--referee) ── */ --violet:#6D5BD0; --violet-bg:#EFECFB; --blue:#4E7FC7; --blue-bg:#EAF1FA; --teal:#2E8E9E; --teal-bg:#E5F1F3; /* ── Code surface (shared terminal-style code blocks; intentionally dark in both themes) ── */ --code-bg:#15171C; --code-fg:#D7DBE3; --syn-key:#8389E8; --syn-str:#7FB88A; --syn-com:#6B7079; --syn-num:#D7A85B; /* ── Dark-hero zone (a deliberate always-dark marketing surface) ── */ --hero-bg:#141413; --hero-surface:rgba(255,255,255,.045); --hero-line:rgba(255,255,255,.12); --hero-ink:rgba(255,255,255,.92); --hero-ink-2:rgba(255,255,255,.55); /* Verdict/role palette tuned for the dark hero (demo card on the landing). */ --hero-pro:#E0655A; --hero-pro-tint:rgba(224,101,90,.12); --hero-def:#6CA0E8; --hero-def-tint:rgba(108,160,232,.12); --hero-ref:#A78BFA; --hero-ref-tint:rgba(167,139,250,.12); --hero-ok:#34D17E; --hero-ok-tint:rgba(52,209,126,.12); --hero-warn:#E0A53A; /* ── Spacing scale ── */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* ── Type scale ── */ --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px; --fs-3xl:40px; /* ── Container ── */ --container:1060px; --gutter:28px; /* ── Type ── (aligned to the Field product: Space Grotesk display + IBM Plex Mono) ── */ --serif:'Space Grotesk','Inter',-apple-system,sans-serif; /* display font (token kept for back-compat) */ --display:'Space Grotesk','Inter',sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* ── Radius / shadow / motion ── */ --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:999px; --e-1:0 1px 2px rgba(20,20,18,.04); --e-2:0 1px 2px rgba(20,20,18,.04), 0 4px 12px rgba(20,20,18,.05); --ease:cubic-bezier(.2,.6,.2,1); /* ── Layout ── */ --sidebar:240px; --hbar:56px; --navbg:rgba(252,252,251,.82); --herodot:rgba(28,28,26,.05); /* ── Aliases (settings page + legacy names → canonical tokens) ── */ --accent:var(--brand); --accent-soft:var(--brand-tint); --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3); --bg:var(--canvas); --panel:var(--surface); --panel-2:var(--canvas-2); --panel-3:var(--canvas-2); --green-soft:var(--supported-tint); --red:var(--refuted); --red-soft:var(--refuted-tint); --amber-soft:var(--incomplete-tint); --pro:var(--prosecutor); --def:var(--defender); --ref:var(--referee); } /* Theme-toggle icons: the correct glyph is chosen from [data-theme] at first paint, so there is no JS-timing flash before theme.js's DOMContentLoaded sync. The shown icon keeps its natural display; theme.js's later inline writes stay consistent. (Markup must NOT inline display:none on the sun, or it would win over these rules.) */ html:not([data-theme="dark"]) [data-theme-icon="sun"] { display: none; } html[data-theme="dark"] [data-theme-icon="moon"] { display: none; } :root[data-theme="dark"], html[data-theme="dark"] { --ink:#E8E8E4; --ink-2:#A0A09A; --ink-3:#6A6A64; --ink-4:#484844; --ink-muted:#757B85; --line:#2C2C28; --line-2:#242420; --surface:#1C1C1A; --canvas:#141412; --canvas-2:#222220; --brand:#5B6CF0; --brand-hover:#7480F4; --brand-tint:#1C1E3A; --brand-line:#2E3168; --supported:#34A86A; --supported-tint:#0E2B1C; --refuted:#E05A50; --refuted-tint:#2A1210; --incomplete:#D4933A; --incomplete-tint:#2A1E0A; --incomplete-ink:#E0B24D; --info:#5B8FC4; --info-tint:#0E1E30; --green:#5BC98A; --green-bg:rgba(70,185,92,.15); --amber:#E0B24D; --amber-bg:rgba(224,178,77,.15); --rose:#E66E64; --rose-bg:rgba(230,110,100,.15); --e-1:0 1px 2px rgba(0,0,0,.3); --e-2:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4); --navbg:rgba(12,13,17,.88); --herodot:rgba(255,255,255,.05); /* Verdict borders + extended accents that must invert; code surface goes darker. On-fills, hero zone, syntax, spacing/type/container stay constant across themes. */ --supported-line:#2E5E45; --refuted-line:#6E2E28; --incomplete-line:#5C4824; --incomplete-line-2:#4D3D1E; --referee-tint:#211B34; --violet:#A78BFA; --violet-bg:rgba(124,92,247,.16); --blue:#7FB0F5; --blue-bg:rgba(77,141,254,.15); --teal:#5BC0D0; --teal-bg:rgba(46,142,158,.18); --code-bg:#0a0b0e; /* --on-ink sits on var(--ink), which inverts to a light surface in dark mode, so its foreground must go dark. (--on-brand stays #fff: brand fill is saturated in both themes.) */ --on-ink:#141412; }