/* ============================================================================ SAMM — Theme palettes ---------------------------------------------------------------------------- Each theme is a set of CSS custom properties applied via . app.css consumes only these variables, so swapping data-theme re-skins the whole app with no reload. themes.css is loaded BEFORE app.css. :root carries the samm-default palette so a page with no data-theme still renders correctly. 16 themes ship: - samm-default : the shipped default — light palette. - samm-dark : the historical dark look. - the other 14 : distinct light/dark palettes, each with its own hue cast. Each palette pushes a clear, recognisable colour cast (background tint + harmonised primary/accent) so the themes read as genuinely different rather than near-identical near-black/near-white variants. The server-side registry of theme ids is app/utils/theming.py — keep the two in sync when adding a theme. Tokens (26): --bg --bg-elev --bg-elev-2 --bg-hover --surface --surface-2 --border --border-strong --fg --fg-muted --fg-dim --primary --primary-hov --primary-fg --accent --accent-hov --warn --danger --danger-hov --info --violet --ring --shadow-sm --shadow --shadow-lg --grid-line ============================================================================ */ /* ---- samm-default — the shipped default (light palette, high-contrast) ---- Contrast raised ~40% over the original (two ~20% passes): muted/dim text dropped two slate steps, borders darkened, page bg pulled further off the white cards, shadows deepened. fg sits near pure black. */ :root, html[data-theme="samm-default"] { --bg: #e2e8f1; --bg-elev: #ffffff; --bg-elev-2: #dde5f1; --bg-hover: #d6e0f0; --surface: #ffffff; --surface-2: #e6ecf4; --border: #b9c7de; --border-strong:#93a6c6; --fg: #05080f; --fg-muted: #1e293b; --fg-dim: #334155; --primary: #2563eb; --primary-hov: #1d4ed8; --primary-fg: #ffffff; --accent: #059669; --accent-hov: #047857; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0891b2; --violet: #7c3aed; --ring: rgba(37,99,235,.50); --shadow-sm: 0 1px 2px rgba(15,23,42,.10); --shadow: 0 4px 12px rgba(15,23,42,.16); --shadow-lg: 0 10px 30px rgba(15,23,42,.27); --grid-line: rgba(15,23,42,.085); } /* ---- samm-dark — the historical dark look -------------------------------- */ html[data-theme="samm-dark"] { --bg: #0b0f1a; --bg-elev: #111827; --bg-elev-2: #1a2233; --bg-hover: #1d2738; --surface: #131a2a; --surface-2: #1a2233; --border: #232b3d; --border-strong:#2e3850; --fg: #e6eaf2; --fg-muted: #9aa3b8; --fg-dim: #6b7591; --primary: #3b82f6; --primary-hov: #2563eb; --primary-fg: #ffffff; --accent: #10b981; --accent-hov: #059669; --warn: #f59e0b; --danger: #ef4444; --danger-hov: #dc2626; --info: #06b6d4; --violet: #a78bfa; --ring: rgba(59,130,246,.45); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 10px 30px rgba(0,0,0,.45); --grid-line: rgba(255,255,255,.05); } /* ---- midnight — deep indigo navy, electric indigo primary ---------------- */ html[data-theme="midnight"] { --bg: #0a0f33; --bg-elev: #131a4d; --bg-elev-2: #1d2663; --bg-hover: #273076; --surface: #151d56; --surface-2: #1d2663; --border: #303a82; --border-strong:#434fa6; --fg: #e9ecff; --fg-muted: #a7adde; --fg-dim: #7077b0; --primary: #6366f1; --primary-hov: #4f46e5; --primary-fg: #ffffff; --accent: #22d3ee; --accent-hov: #06b6d4; --warn: #fbbf24; --danger: #fb7185; --danger-hov: #f43f5e; --info: #38bdf8; --violet: #c4b5fd; --ring: rgba(99,102,241,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.05); } /* ---- slate — soft mid-grey charcoal, zero colour cast -------------------- */ html[data-theme="slate"] { --bg: #292b30; --bg-elev: #323439; --bg-elev-2: #3c3e44; --bg-hover: #46484f; --surface: #323439; --surface-2: #3c3e44; --border: #4a4c53; --border-strong:#5e616a; --fg: #e9eaed; --fg-muted: #b3b6bd; --fg-dim: #868a93; --primary: #93b4e8; --primary-hov: #b3cdf5; --primary-fg: #1a1d24; --accent: #5fcbb0; --accent-hov: #80dcc4; --warn: #fbbf24; --danger: #f87171; --danger-hov: #fca5a5; --info: #67c8e0; --violet: #b4a7e8; --ring: rgba(147,180,232,.45); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 10px 30px rgba(0,0,0,.5); --grid-line: rgba(255,255,255,.06); } /* ---- royal — rich purple, magenta-pink accent ---------------------------- */ html[data-theme="royal"] { --bg: #1d0f38; --bg-elev: #2a1850; --bg-elev-2: #382163; --bg-hover: #452a76; --surface: #2a1850; --surface-2: #382163; --border: #4a3179; --border-strong:#634299; --fg: #f2e9fc; --fg-muted: #c4b0dd; --fg-dim: #8e78ab; --primary: #a855f7; --primary-hov: #9333ea; --primary-fg: #ffffff; --accent: #f472b6; --accent-hov: #ec4899; --warn: #fbbf24; --danger: #fb7185; --danger-hov: #f43f5e; --info: #38bdf8; --violet: #d8b4fe; --ring: rgba(168,85,247,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.05); } /* ---- crimson — deep wine-red, warm gold accent --------------------------- */ html[data-theme="crimson"] { --bg: #230b0f; --bg-elev: #341216; --bg-elev-2: #451a20; --bg-hover: #56222a; --surface: #341216; --surface-2: #451a20; --border: #5c2b33; --border-strong:#7d3b45; --fg: #fbe9ea; --fg-muted: #dba9ac; --fg-dim: #a8767a; --primary: #ef4444; --primary-hov: #dc2626; --primary-fg: #ffffff; --accent: #f59e0b; --accent-hov: #d97706; --warn: #fbbf24; --danger: #f87171; --danger-hov: #ef4444; --info: #38bdf8; --violet: #c4b5fd; --ring: rgba(239,68,68,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.05); } /* ---- forest — deep pine green, warm amber accent ------------------------- */ html[data-theme="forest"] { --bg: #0a1f14; --bg-elev: #11301f; --bg-elev-2: #193f2a; --bg-hover: #214d34; --surface: #11301f; --surface-2: #193f2a; --border: #2a5239; --border-strong:#3b6e4e; --fg: #e6f4ea; --fg-muted: #a1c9b0; --fg-dim: #6d9580; --primary: #34d399; --primary-hov: #10b981; --primary-fg: #06291b; --accent: #f59e0b; --accent-hov: #d97706; --warn: #fbbf24; --danger: #fb7185; --danger-hov: #f43f5e; --info: #38bdf8; --violet: #c4b5fd; --ring: rgba(52,211,153,.5); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.05); } /* ---- amber — warm honey-gold on espresso black, cool blue accent --------- */ html[data-theme="amber"] { --bg: #1d1407; --bg-elev: #2b1f0e; --bg-elev-2: #392a15; --bg-hover: #48361d; --surface: #2b1f0e; --surface-2: #392a15; --border: #4f3b20; --border-strong:#6d522f; --fg: #fbf0db; --fg-muted: #d8c194; --fg-dim: #a5916a; --primary: #f59e0b; --primary-hov: #d97706; --primary-fg: #1d1407; --accent: #38bdf8; --accent-hov: #0ea5e9; --warn: #fbbf24; --danger: #f87171; --danger-hov: #ef4444; --info: #38bdf8; --violet: #c4b5fd; --ring: rgba(245,158,11,.5); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.05); } /* ---- nord — arctic blue-grey, soft mid-dark, frost-cyan primary ---------- */ html[data-theme="nord"] { --bg: #2e3440; --bg-elev: #3b4252; --bg-elev-2: #434c5e; --bg-hover: #4c566a; --surface: #3b4252; --surface-2: #434c5e; --border: #464f63; --border-strong:#5b6880; --fg: #eceff4; --fg-muted: #d8dee9; --fg-dim: #9aa4ba; --primary: #88c0d0; --primary-hov: #8fbcbb; --primary-fg: #2e3440; --accent: #a3be8c; --accent-hov: #b3ca9e; --warn: #ebcb8b; --danger: #bf616a; --danger-hov: #d0777f; --info: #81a1c1; --violet: #b48ead; --ring: rgba(136,192,208,.5); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 10px 30px rgba(0,0,0,.5); --grid-line: rgba(255,255,255,.06); } /* ---- graphite — pure-black OLED, high-contrast (accessibility-friendly) -- */ html[data-theme="graphite"] { --bg: #000000; --bg-elev: #0d0d0d; --bg-elev-2: #1a1a1a; --bg-hover: #262626; --surface: #0d0d0d; --surface-2: #161616; --border: #3a3a3a; --border-strong:#5c5c5c; --fg: #ffffff; --fg-muted: #d4d4d4; --fg-dim: #a3a3a3; --primary: #4da3ff; --primary-hov: #2b8fff; --primary-fg: #000000; --accent: #34d399; --accent-hov: #10b981; --warn: #fbbf24; --danger: #ff6b6b; --danger-hov: #ff4444; --info: #4dd4ff; --violet: #c4b5fd; --ring: rgba(77,163,255,.6); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 4px 14px rgba(0,0,0,.6); --shadow-lg: 0 12px 34px rgba(0,0,0,.7); --grid-line: rgba(255,255,255,.12); } /* ---- emerald — green primary, mint-tinted light surfaces ----------------- */ html[data-theme="emerald"] { --bg: #e0f5e8; --bg-elev: #ffffff; --bg-elev-2: #d3f0de; --bg-hover: #c6ebd3; --surface: #ffffff; --surface-2: #edfaf1; --border: #b3e3c6; --border-strong:#88d2a6; --fg: #06301f; --fg-muted: #356b4e; --fg-dim: #5e9078; --primary: #059669; --primary-hov: #047857; --primary-fg: #ffffff; --accent: #0d9488; --accent-hov: #0f766e; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0891b2; --violet: #7c3aed; --ring: rgba(5,150,105,.35); --shadow-sm: 0 1px 2px rgba(6,46,33,.07); --shadow: 0 4px 12px rgba(6,46,33,.12); --shadow-lg: 0 10px 30px rgba(6,46,33,.20); --grid-line: rgba(6,46,33,.06); } /* ---- ocean — cyan primary, sky-tinted light surfaces --------------------- */ html[data-theme="ocean"] { --bg: #d9eefb; --bg-elev: #ffffff; --bg-elev-2: #c9e6f8; --bg-hover: #b9def4; --surface: #ffffff; --surface-2: #eaf6fc; --border: #abd6ef; --border-strong:#7cc0e4; --fg: #062a3d; --fg-muted: #335f78; --fg-dim: #5e87a0; --primary: #0891b2; --primary-hov: #0e7490; --primary-fg: #ffffff; --accent: #2563eb; --accent-hov: #1d4ed8; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0284c7; --violet: #7c3aed; --ring: rgba(8,145,178,.35); --shadow-sm: 0 1px 2px rgba(8,42,61,.07); --shadow: 0 4px 12px rgba(8,42,61,.12); --shadow-lg: 0 10px 30px rgba(8,42,61,.20); --grid-line: rgba(8,42,61,.06); } /* ---- sunset — burnt orange, coral accent, warm peach surfaces ------------ */ html[data-theme="sunset"] { --bg: #ffe8d6; --bg-elev: #fffaf5; --bg-elev-2: #ffe0c4; --bg-hover: #ffd5b0; --surface: #fffaf5; --surface-2: #fff1e4; --border: #f6cda6; --border-strong:#ecb37e; --fg: #3d1f0c; --fg-muted: #6e4a30; --fg-dim: #9a7050; --primary: #ea580c; --primary-hov: #c2410c; --primary-fg: #ffffff; --accent: #e11d48; --accent-hov: #be123c; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0891b2; --violet: #7c3aed; --ring: rgba(234,88,12,.35); --shadow-sm: 0 1px 2px rgba(61,31,12,.08); --shadow: 0 4px 12px rgba(61,31,12,.13); --shadow-lg: 0 10px 30px rgba(61,31,12,.22); --grid-line: rgba(61,31,12,.06); } /* ---- sand — warm beige paper, terracotta primary, olive accent ----------- */ html[data-theme="sand"] { --bg: #efe6d2; --bg-elev: #fffdf7; --bg-elev-2: #e8dcc1; --bg-hover: #ded0ad; --surface: #fffdf7; --surface-2: #f3ebd9; --border: #d8c6a0; --border-strong:#c0a878; --fg: #382e1c; --fg-muted: #6a5b3c; --fg-dim: #978566; --primary: #b45309; --primary-hov: #92400e; --primary-fg: #ffffff; --accent: #4d7c0f; --accent-hov: #3f6212; --warn: #d97706; --danger: #b91c1c; --danger-hov: #991b1b; --info: #0e7490; --violet: #7c3aed; --ring: rgba(180,83,9,.35); --shadow-sm: 0 1px 2px rgba(56,46,28,.08); --shadow: 0 4px 12px rgba(56,46,28,.13); --shadow-lg: 0 10px 30px rgba(56,46,28,.22); --grid-line: rgba(56,46,28,.06); } /* ---- rose — blush pink, rose primary, violet accent (light) -------------- */ html[data-theme="rose"] { --bg: #fde8ef; --bg-elev: #fffafc; --bg-elev-2: #fbdce7; --bg-hover: #f7cddc; --surface: #fffafc; --surface-2: #fef1f5; --border: #f3c4d3; --border-strong:#e89cb4; --fg: #3d1224; --fg-muted: #6e3f52; --fg-dim: #9a6e80; --primary: #e11d6f; --primary-hov: #be1259; --primary-fg: #ffffff; --accent: #7c3aed; --accent-hov: #6d28d9; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0891b2; --violet: #7c3aed; --ring: rgba(225,29,111,.32); --shadow-sm: 0 1px 2px rgba(61,18,36,.07); --shadow: 0 4px 12px rgba(61,18,36,.12); --shadow-lg: 0 10px 30px rgba(61,18,36,.20); --grid-line: rgba(61,18,36,.06); } /* ---- lavender — pale lilac, violet primary, pink accent (light) ---------- */ html[data-theme="lavender"] { --bg: #f0eafb; --bg-elev: #ffffff; --bg-elev-2: #e7ddf8; --bg-hover: #ddd0f3; --surface: #ffffff; --surface-2: #f5f0fd; --border: #ddcdf0; --border-strong:#c3a9e3; --fg: #281642; --fg-muted: #553f72; --fg-dim: #826b9e; --primary: #7c3aed; --primary-hov: #6d28d9; --primary-fg: #ffffff; --accent: #db2777; --accent-hov: #be185d; --warn: #d97706; --danger: #dc2626; --danger-hov: #b91c1c; --info: #0891b2; --violet: #9333ea; --ring: rgba(124,58,237,.32); --shadow-sm: 0 1px 2px rgba(40,22,66,.07); --shadow: 0 4px 12px rgba(40,22,66,.12); --shadow-lg: 0 10px 30px rgba(40,22,66,.20); --grid-line: rgba(40,22,66,.06); }