/* ============================================================================ MyRoof Modules — design tokens ---------------------------------------------------------------------------- This is the ONLY file that names a colour. Every component below draws from var(--…), so a theme is a token block and nothing else — no component ever gets a second, theme-specific rule. Themes are set with data-theme on : Light is the bare :root block (no attribute needed). Lineage: the palette and radii come from GreenFlowBlocks' Genesis tokens, so the two products read as family. The status tokens (--ok-*, --warn-*, --bad-*) are new here — Genesis hard-codes semantic text tints like #0c7a55, which do not flip for dark. Those are proper token triplets below. ============================================================================ */ :root{ /* ---- brand / interactive ------------------------------------------------ */ --primary:#6366F1; --primary-hover:#4F46E5; --primary-soft:rgba(99,102,241,.09); /* tinted fill: active nav, selected row */ --primary-line:rgba(99,102,241,.35); /* tinted border on that fill */ --on-primary:#FFFFFF; /* text ON a solid primary surface */ /* ---- canvas / ink ------------------------------------------------------- */ --bg:#FAFAFA; /* page canvas */ --surface:#FFFFFF; /* cards, panels, popovers — sits ON the canvas */ --surface-2:#F3F3F5; /* recessed: table head, input fill, code block */ --text:#0A0A0A; /* primary ink */ --text-2:#6B6B6B; /* secondary ink: labels, help text */ --neutral:#9C9C9C; /* tertiary ink: placeholders, disabled, overlines */ --border:#E8E8EC; /* the one hairline */ --border-strong:#D8D8DE; /* dividers that must survive a tinted background */ /* ---- status ------------------------------------------------------------- */ /* Each status is a triplet: fg (text/icon) · bg (soft fill) · line (border). Never use fg as a fill or bg as text — the contrast pair is the point. */ --ok-fg:#0C7A55; --ok-bg:rgba(16,185,129,.10); --ok-line:rgba(16,185,129,.42); --warn-fg:#B4790B; --warn-bg:rgba(245,158,11,.11); --warn-line:rgba(245,158,11,.45); --bad-fg:#C2323B; --bad-bg:rgba(239,68,68,.09); --bad-line:rgba(239,68,68,.42); --info-fg:#4F46E5; --info-bg:rgba(99,102,241,.09); --info-line:rgba(99,102,241,.38); /* solid variants — for a filled badge or a destructive button */ --ok-solid:#10B981; --warn-solid:#F59E0B; --bad-solid:#EF4444; /* ---- special surfaces --------------------------------------------------- */ --glass:rgba(255,255,255,.78); /* frosted sticky header */ --inverse:#101014; /* tooltip / toast — high contrast in BOTH themes */ --inverse-text:#FFFFFF; --overlay:rgba(15,23,42,.45); /* modal scrim */ /* ---- type --------------------------------------------------------------- */ --font-display:'General Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-body:'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --fs-display:30px; --lh-display:1.12; --fs-h1:24px; --lh-h1:1.18; --fs-h2:19px; --lh-h2:1.24; --fs-h3:16px; --lh-h3:1.3; --fs-body:15px; --lh-body:1.5; --fs-sm:13.5px; --lh-sm:1.45; --fs-xs:12px; --lh-xs:1.4; --fs-micro:11px; --lh-micro:1.35; /* overlines, badges, keycaps */ /* ---- space — a 4px scale. Use the token, not the number. ---------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* ---- radius ------------------------------------------------------------- */ --r-chip:4px; --r-btn:6px; --r-panel:8px; --r-card:12px; --r-pill:9999px; /* ---- elevation ---------------------------------------------------------- */ --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 8px 30px rgba(0,0,0,.08); /* raised card / hover */ --shadow-lg:0 12px 40px rgba(0,0,0,.14); /* popover, modal */ --glow-primary:0 4px 12px rgba(99,102,241,.35); --ring:0 0 0 3px rgba(99,102,241,.14); /* focus ring — pairs with border-color */ /* ---- layout metrics ----------------------------------------------------- */ --nav-h:56px; /* sticky top bar */ --actions-h:64px; /* fixed action bar — .form-actions, and the gap that reserves its height */ --side-w:236px; /* module sidebar */ --maxw:1360px; /* content column cap */ --maxw-read:760px; /* prose / single-column form cap */ /* ---- motion ------------------------------------------------------------- */ --t-fast:.12s; --t:.16s; --t-slow:.24s; --ease:cubic-bezier(.2,.7,.2,1); color-scheme:light; } /* ============================================================================ DARK — the second first-class theme. Note what changes and what does not: --primary LIFTS (indigo #6366F1 fails on a near-black canvas), the status fg tints lift with it, the shadows deepen a lot (a 8% black shadow is invisible on #0E0E12), and --inverse goes UP to a lifted grey so a toast still reads as a floating chip rather than a hole. ============================================================================ */ :root[data-theme="dark"]{ --primary:#818CF8; --primary-hover:#A5B4FC; --primary-soft:rgba(129,140,248,.14); --primary-line:rgba(129,140,248,.42); --on-primary:#14141A; /* dark ink on the lifted indigo */ --bg:#0E0E12; --surface:#17171C; --surface-2:#212128; --text:#F2F2F5; --text-2:#A0A0AA; --neutral:#8A8A93; --border:#2A2A32; --border-strong:#3B3B45; --ok-fg:#4ADE9B; --ok-bg:rgba(16,185,129,.16); --ok-line:rgba(74,222,155,.38); --warn-fg:#FBBF4E; --warn-bg:rgba(245,158,11,.16); --warn-line:rgba(251,191,78,.38); --bad-fg:#FF8B8B; --bad-bg:rgba(239,68,68,.16); --bad-line:rgba(255,139,139,.38); --info-fg:#A5B4FC; --info-bg:rgba(129,140,248,.14); --info-line:rgba(165,180,252,.38); --ok-solid:#10B981; --warn-solid:#F59E0B; --bad-solid:#EF4444; --glass:rgba(18,18,23,.72); --inverse:#2B2B34; --inverse-text:#F4F4F6; --overlay:rgba(0,0,0,.62); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 30px rgba(0,0,0,.5); --shadow-lg:0 14px 44px rgba(0,0,0,.62); --glow-primary:0 4px 14px rgba(129,140,248,.45); --ring:0 0 0 3px rgba(129,140,248,.24); color-scheme:dark; /* native scrollbars, date pickers, autofill follow */ } /* ============================================================================ Optional extra canvases — proof that a theme is only a token block. Both are drop-in: nothing below tokens.css knows they exist. ============================================================================ */ /* DIM — a softer dark. Same dark family, canvas lifted off near-black. */ :root[data-theme="dim"]{ --primary:#818CF8; --primary-hover:#A5B4FC; --primary-soft:rgba(129,140,248,.14); --primary-line:rgba(129,140,248,.42); --on-primary:#191D26; --bg:#1B1E27; --surface:#232732; --surface-2:#2B313D; --text:#E7E9F0; --text-2:#A9AEBD; --neutral:#8E94A3; --border:#333A48; --border-strong:#434B5B; --ok-fg:#4ADE9B; --ok-bg:rgba(16,185,129,.16); --ok-line:rgba(74,222,155,.36); --warn-fg:#FBBF4E; --warn-bg:rgba(245,158,11,.16); --warn-line:rgba(251,191,78,.36); --bad-fg:#FF8B8B; --bad-bg:rgba(239,68,68,.16); --bad-line:rgba(255,139,139,.36); --info-fg:#A5B4FC; --info-bg:rgba(129,140,248,.14); --info-line:rgba(165,180,252,.36); --glass:rgba(27,30,39,.72); --inverse:#363D4B; --inverse-text:#F4F4F6; --overlay:rgba(0,0,0,.55); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 8px 30px rgba(0,0,0,.42); --shadow-lg:0 14px 44px rgba(0,0,0,.55); --glow-primary:0 4px 14px rgba(129,140,248,.4); --ring:0 0 0 3px rgba(129,140,248,.24); color-scheme:dark; } /* SEPIA — a warm light. Light family: cream canvas, brown-black ink, less glare. */ :root[data-theme="sepia"]{ --primary:#6366F1; --primary-hover:#4F46E5; --primary-soft:rgba(99,102,241,.10); --primary-line:rgba(99,102,241,.35); --on-primary:#FFFFFF; --bg:#EDE4D3; --surface:#F8F1E1; --surface-2:#E7DCC7; --text:#3B3222; --text-2:#6E624E; --neutral:#9A8E76; --border:#DDD0B8; --border-strong:#CFC0A3; --ok-fg:#0C7A55; --ok-bg:rgba(16,185,129,.13); --ok-line:rgba(16,185,129,.40); --warn-fg:#96650A; --warn-bg:rgba(245,158,11,.16); --warn-line:rgba(245,158,11,.45); --bad-fg:#B02A33; --bad-bg:rgba(239,68,68,.11); --bad-line:rgba(239,68,68,.40); --info-fg:#4F46E5; --info-bg:rgba(99,102,241,.10); --info-line:rgba(99,102,241,.35); --glass:rgba(243,236,221,.80); --inverse:#2B2B34; --inverse-text:#FFFFFF; --overlay:rgba(59,50,34,.45); --shadow-sm:0 1px 2px rgba(74,58,32,.07); --shadow:0 8px 30px rgba(74,58,32,.12); --shadow-lg:0 12px 40px rgba(74,58,32,.18); --glow-primary:0 4px 12px rgba(99,102,241,.30); --ring:0 0 0 3px rgba(99,102,241,.16); color-scheme:light; } /* ---- No stored preference? Follow the OS. ------------------------------- Guarded with :not([data-theme]) so an explicit choice always wins. theme.js stamps data-theme before paint once the user has chosen. */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --primary:#818CF8; --primary-hover:#A5B4FC; --primary-soft:rgba(129,140,248,.14); --primary-line:rgba(129,140,248,.42); --on-primary:#14141A; --bg:#0E0E12; --surface:#17171C; --surface-2:#212128; --text:#F2F2F5; --text-2:#A0A0AA; --neutral:#8A8A93; --border:#2A2A32; --border-strong:#3B3B45; --ok-fg:#4ADE9B; --ok-bg:rgba(16,185,129,.16); --ok-line:rgba(74,222,155,.38); --warn-fg:#FBBF4E; --warn-bg:rgba(245,158,11,.16); --warn-line:rgba(251,191,78,.38); --bad-fg:#FF8B8B; --bad-bg:rgba(239,68,68,.16); --bad-line:rgba(255,139,139,.38); --info-fg:#A5B4FC; --info-bg:rgba(129,140,248,.14); --info-line:rgba(165,180,252,.38); --glass:rgba(18,18,23,.72); --inverse:#2B2B34; --inverse-text:#F4F4F6; --overlay:rgba(0,0,0,.62); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 30px rgba(0,0,0,.5); --shadow-lg:0 14px 44px rgba(0,0,0,.62); --glow-primary:0 4px 14px rgba(129,140,248,.45); --ring:0 0 0 3px rgba(129,140,248,.24); color-scheme:dark; } }