/* =========================================================================== FinCore Engine — theme tokens --------------------------------------------------------------------------- The only place the palette is defined. Pages reference tokens, never raw colours, so light mode is a matter of re-pointing these values. Resolution order, strongest last: 1. dark is the brand default 2. the visitor's OS preference, if they have expressed no choice 3. an explicit choice, stored as data-theme on The [data-theme] attribute is written by the bootstrap script in each page's before first paint, so there is no flash of the wrong theme. =========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #080b11; --bg-nav: rgba(8,11,17,0.85); --bg-nav-solid: #080b11; --bg-sunken: rgba(8,11,17,0.7); /* surfaces sit on the ground; borders separate them */ --surface: rgba(255,255,255,0.028); --surface-2: rgba(255,255,255,0.04); --surface-3: rgba(255,255,255,0.05); --surface-well: #0b1017; --border-soft: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --border-mid: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.12); --border-dash: rgba(255,255,255,0.08); /* text, brightest first */ --text-hi: #eef3f8; --text: #e7ecf3; --text-soft: #dfe6ee; --text-body: #c4cdd8; --text-2: #aab4c2; --text-3: #9aa4b2; --text-4: #8b95a5; --text-5: #6b7686; --text-6: #5a6472; /* brand */ --accent: #34e0a1; /* fills, rings, buttons */ --accent-link: #34e0a1; /* accent as readable text */ --accent-hover: #6ff0c2; --accent-bright: #7cf0c2; /* mono labels on dark */ --accent-deep: #0d9668; --accent-ink: #04140f; /* text sitting on --accent */ --accent-ink-2: #041410; /* raw channels so canvas scripts can build rgba() at any alpha */ --accent-rgb: 52,224,161; --line-rgb: 255,255,255; --viz-core-rgb: 124,240,194; /* bright core of a moving packet */ --viz-line-a: 0.10; /* conduit / ring hairlines */ /* accent washes, low to high */ --wash-03: rgba(52,224,161,0.03); --wash-05: rgba(52,224,161,0.05); --wash-07: rgba(52,224,161,0.07); --wash-08: rgba(52,224,161,0.08); --wash-10: rgba(52,224,161,0.10); --wash-12: rgba(52,224,161,0.12); --wash-14: rgba(52,224,161,0.14); --wash-16: rgba(52,224,161,0.16); --wash-22: rgba(52,224,161,0.22); --wash-28: rgba(52,224,161,0.28); --wash-30: rgba(52,224,161,0.30); --wash-32: rgba(52,224,161,0.32); --wash-35: rgba(52,224,161,0.35); --wash-40: rgba(52,224,161,0.40); --wash-45: rgba(52,224,161,0.45); --wash-50: rgba(52,224,161,0.50); /* secondary hues — used for asset classes and status */ --blue: #7cc4ff; --blue-wash: rgba(90,140,255,0.08); --amber: #f5b74e; --amber-text: #f5cf8e; --amber-wash: rgba(245,183,78,0.12); --amber-border: rgba(245,183,78,0.35); --red: #ff5f57; --red-text: #ff9a94; --red-wash: rgba(255,95,87,0.12); --red-border: rgba(255,95,87,0.35); /* elevated panels — the tracker mock, step visual and agent screen */ --panel-a: rgba(20,26,36,0.95); --panel-b: rgba(12,16,24,0.95); --panel-float: rgba(10,14,20,0.92); --shadow-deep: rgba(0,0,0,0.55); --dotted: rgba(139,149,165,0.5); --blue-soft: rgba(124,196,255,0.22); --blue-strong: rgba(124,196,255,0.5); --err-wash: rgba(255,120,120,0.08); --err-border: rgba(255,120,120,0.35); --err-text: #ffb3b3; /* composites */ --grad-text: linear-gradient(120deg,#34e0a1,#6ff0c2 55%,#7cc4ff); --grad-mark: linear-gradient(135deg,#34e0a1,#0d9668); --grad-band: linear-gradient(150deg,rgba(52,224,161,0.14),rgba(90,140,255,0.08)); --shadow-mark: 0 0 22px rgba(52,224,161,0.45); --shadow-cta: 0 8px 24px rgba(52,224,161,0.30); --shadow-cta-lg: 0 14px 40px rgba(52,224,161,0.40); --shadow-card: none; } /* --- light ----------------------------------------------------------------- Not an inversion. The ground is a green-biased off-white so the mint reads as deliberate rather than dropped onto default white; cards go pure white so they lift off it without needing a heavy border. The accent darkens for text — #34e0a1 on white is about 1.5:1 and unreadable — while the solid buttons keep a strong green with white ink. --------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f2f6f4; --bg-nav: rgba(242,246,244,0.88); --bg-nav-solid: #f2f6f4; --bg-sunken: rgba(226,234,230,0.7); --surface: #ffffff; --surface-2: #ffffff; --surface-3: rgba(11,74,53,0.05); --surface-well: #ffffff; --border-soft: rgba(11,55,40,0.09); --border: rgba(11,55,40,0.13); --border-mid: rgba(11,55,40,0.16); --border-strong: rgba(11,55,40,0.20); --border-dash: rgba(11,55,40,0.14); --text-hi: #05100c; --text: #0d1a15; --text-soft: #16261f; --text-body: #33453d; --text-2: #46584f; --text-3: #526359; --text-4: #61736a; --text-5: #5c6d64; --text-6: #5f7067; --accent: #0a7a52; --accent-link: #07704a; --accent-hover: #05593a; --accent-bright: #066242; --accent-deep: #34e0a1; --accent-ink: #ffffff; --accent-ink-2: #ffffff; --accent-rgb: 13,150,104; --line-rgb: 11,55,40; --viz-core-rgb: 13,150,104; --viz-line-a: 0.17; --wash-03: rgba(13,150,104,0.030); --wash-05: rgba(13,150,104,0.045); --wash-07: rgba(13,150,104,0.060); --wash-08: rgba(13,150,104,0.070); --wash-10: rgba(13,150,104,0.085); --wash-12: rgba(13,150,104,0.10); --wash-14: rgba(13,150,104,0.11); --wash-16: rgba(13,150,104,0.13); --wash-22: rgba(13,150,104,0.17); --wash-28: rgba(13,150,104,0.22); --wash-30: rgba(13,150,104,0.24); --wash-32: rgba(13,150,104,0.26); --wash-35: rgba(13,150,104,0.30); --wash-40: rgba(13,150,104,0.36); --wash-45: rgba(13,150,104,0.42); --wash-50: rgba(13,150,104,0.48); --blue: #1f6fb8; --blue-wash: rgba(31,111,184,0.08); --amber: #b8720a; --amber-text: #8a5406; --amber-wash: rgba(184,114,10,0.12); --amber-border: rgba(184,114,10,0.38); --red: #c8382f; --red-text: #9b2b23; --red-wash: rgba(200,56,47,0.10); --red-border: rgba(200,56,47,0.34); /* --grad-mark is intentionally not redefined: the brand mark keeps its mint gradient in both themes, so it inherits the value from :root. */ --panel-a: #ffffff; --panel-b: #fbfdfc; --panel-float: rgba(255,255,255,0.97); --shadow-deep: rgba(11,55,40,0.13); --dotted: rgba(11,55,40,0.38); --blue-soft: rgba(31,111,184,0.22); --blue-strong: rgba(31,111,184,0.5); --err-wash: rgba(190,40,40,0.07); --err-border: rgba(190,40,40,0.32); --err-text: #a12724; --grad-text: linear-gradient(120deg,#0d9668,#0a7d55 45%,#1f6fb8); --grad-band: linear-gradient(150deg,rgba(13,150,104,0.10),rgba(31,111,184,0.07)); --shadow-mark: 0 4px 14px rgba(13,150,104,0.30); --shadow-cta: 0 6px 18px rgba(13,150,104,0.24); --shadow-cta-lg: 0 12px 30px rgba(13,150,104,0.28); --shadow-card: 0 1px 2px rgba(11,55,40,0.04), 0 6px 20px rgba(11,55,40,0.05); } /* OS preference decides only while the visitor has expressed no choice. The bootstrap script normally sets data-theme before paint, so this mainly covers the no-JS case. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f2f6f4; --bg-nav: rgba(242,246,244,0.88); --bg-nav-solid: #f2f6f4; --bg-sunken: rgba(226,234,230,0.7); --surface: #ffffff; --surface-2: #ffffff; --surface-3: rgba(11,74,53,0.05); --surface-well: #ffffff; --border-soft: rgba(11,55,40,0.09); --border: rgba(11,55,40,0.13); --border-mid: rgba(11,55,40,0.16); --border-strong: rgba(11,55,40,0.20); --border-dash: rgba(11,55,40,0.14); --text-hi: #05100c; --text: #0d1a15; --text-soft: #16261f; --text-body: #33453d; --text-2: #46584f; --text-3: #526359; --text-4: #61736a; --text-5: #5c6d64; --text-6: #5f7067; --accent: #0a7a52; --accent-link: #07704a; --accent-hover: #05593a; --accent-bright: #066242; --accent-deep: #34e0a1; --accent-ink: #ffffff; --accent-ink-2: #ffffff; --accent-rgb: 13,150,104; --line-rgb: 11,55,40; --viz-core-rgb: 13,150,104; --viz-line-a: 0.17; --wash-03: rgba(13,150,104,0.030); --wash-05: rgba(13,150,104,0.045); --wash-07: rgba(13,150,104,0.060); --wash-08: rgba(13,150,104,0.070); --wash-10: rgba(13,150,104,0.085); --wash-12: rgba(13,150,104,0.10); --wash-14: rgba(13,150,104,0.11); --wash-16: rgba(13,150,104,0.13); --wash-22: rgba(13,150,104,0.17); --wash-28: rgba(13,150,104,0.22); --wash-30: rgba(13,150,104,0.24); --wash-32: rgba(13,150,104,0.26); --wash-35: rgba(13,150,104,0.30); --wash-40: rgba(13,150,104,0.36); --wash-45: rgba(13,150,104,0.42); --wash-50: rgba(13,150,104,0.48); --blue: #1f6fb8; --blue-wash: rgba(31,111,184,0.08); --amber: #b8720a; --amber-text: #8a5406; --amber-wash: rgba(184,114,10,0.12); --amber-border: rgba(184,114,10,0.38); --red: #c8382f; --red-text: #9b2b23; --red-wash: rgba(200,56,47,0.10); --red-border: rgba(200,56,47,0.34); --panel-a: #ffffff; --panel-b: #fbfdfc; --panel-float: rgba(255,255,255,0.97); --shadow-deep: rgba(11,55,40,0.13); --dotted: rgba(11,55,40,0.38); --blue-soft: rgba(31,111,184,0.22); --blue-strong: rgba(31,111,184,0.5); --err-wash: rgba(190,40,40,0.07); --err-border: rgba(190,40,40,0.32); --err-text: #a12724; --grad-text: linear-gradient(120deg,#0d9668,#0a7d55 45%,#1f6fb8); --grad-band: linear-gradient(150deg,rgba(13,150,104,0.10),rgba(31,111,184,0.07)); --shadow-mark: 0 4px 14px rgba(13,150,104,0.30); --shadow-cta: 0 6px 18px rgba(13,150,104,0.24); --shadow-cta-lg: 0 12px 30px rgba(13,150,104,0.28); --shadow-card: 0 1px 2px rgba(11,55,40,0.04), 0 6px 20px rgba(11,55,40,0.05); } } /* --- the toggle ------------------------------------------------------------ Sits next to the language switch and borrows its shape, so the two read as a pair of settings rather than two unrelated controls. --------------------------------------------------------------------------- */ .theme-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 0; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text-4); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--wash-40); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* one icon per theme: show the one that is *not* active, i.e. what you get */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; } } /* Colour changes are instant by default; this softens the switch without animating anything on first paint. */ @media (prefers-reduced-motion: no-preference) { body, nav, footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } }