/* ============================================================ Design tokens — the single source of truth for the palette. Every other stylesheet should reference these, never raw hex. Brand colours are fixed; the semantic tokens beneath them are what flip between light and dark. ============================================================ */ :root { /* Brand (identical in both themes) */ --gold: #bf9b30; --gold-deep: #a67c00; --navy: #132b4f; --navy-deep: #0f2240; --green: #3fd99e; --green-hover: #4be6a8; --danger: #ff6b6b; /* Semantic — light theme */ --bg: #f8f9fb; --surface: #ffffff; --surface-sunken: #eef1f6; --border: rgba(19, 43, 79, 0.14); --text: #132b4f; --text-muted: rgba(19, 43, 79, 0.62); --text-on-dark: #f2f2f2; --heading: #a67c00; /* Form fields */ --field-bg: #ffffff; --field-text: #132b4f; --field-border: rgba(19, 43, 79, 0.22); --field-placeholder: rgba(19, 43, 79, 0.45); /* The brand button: near-black → navy gradient with green text */ --btn-bg: linear-gradient(120deg, rgba(0, 0, 0, 1) 10%, rgba(15, 34, 64, 0.92) 43%); --btn-bg-hover: linear-gradient(120deg, rgba(15, 34, 64, 1) 10%, rgba(0, 0, 0, 0.92) 43%); --btn-text: var(--green); --btn-text-hover: var(--green-hover); /* Glass surfaces */ --glass-bg: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05)); --glass-border: rgba(255, 255, 255, 0.15); --flat-bg: linear-gradient(135deg, rgba(217, 217, 217, 0) 0%, rgba(128, 128, 128, 0.65) 100%); /* Elevation */ --shadow: 0 4px 10px rgba(0, 0, 0, 0.12); --shadow-lifted: 0 8px 16px rgba(0, 0, 0, 0.16); --shadow-btn: 0 6px 12px rgba(0, 0, 0, 0.35); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2); } :root.dark { --bg: #1b1b1b; --surface: #262a30; --surface-sunken: #16181c; --border: rgba(255, 255, 255, 0.16); --text: #f8f9fb; --text-muted: rgba(248, 249, 251, 0.66); --text-on-dark: #f2f2f2; --heading: #d7b04a; /* lifted off #a67c00 so it stays legible on dark */ --field-bg: rgba(255, 255, 255, 0.07); --field-text: #f8f9fb; --field-border: rgba(255, 255, 255, 0.24); --field-placeholder: rgba(248, 249, 251, 0.5); --shadow: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lifted: 0 8px 16px rgba(0, 0, 0, 0.6); --shadow-btn: 0 6px 12px rgba(0, 0, 0, 0.7); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.55); } /* Honour the OS preference until the user makes an explicit choice. The theme controller stamps .dark / .light on , which wins. */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { --bg: #1b1b1b; --surface: #262a30; --surface-sunken: #16181c; --border: rgba(255, 255, 255, 0.16); --text: #f8f9fb; --text-muted: rgba(248, 249, 251, 0.66); --heading: #d7b04a; --field-bg: rgba(255, 255, 255, 0.07); --field-text: #f8f9fb; --field-border: rgba(255, 255, 255, 0.24); --field-placeholder: rgba(248, 249, 251, 0.5); --shadow: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lifted: 0 8px 16px rgba(0, 0, 0, 0.6); --shadow-btn: 0 6px 12px rgba(0, 0, 0, 0.7); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.55); } }