/* Watchman Design Tokens v2. White + gold rebrand 10 Aug 2026 (from v1 31 Jul). */ /* Brilliant white, gold where it earns it, warm near-black ink, dark-luxe accents. */ :root { /* Surfaces */ --paper: #FFFFFF; /* app background, brilliant white */ --card: #FFFFFF; /* card surface */ --panel: #F6F1E4; /* warm, gold-tinted inset panels + input backgrounds */ /* Ink */ --ink: #1A1712; /* primary text, warm near-black */ --ink-60: rgba(26, 23, 18, 0.60); --ink-45: rgba(26, 23, 18, 0.45); /* microlabels */ --ink-35: rgba(26, 23, 18, 0.35); /* disabled icons */ /* Brand */ --green: #1E1A12; /* repurposed: premium near-black for primary actions + active states */ --green-mid: #8A6E32; /* repurposed: bronze-gold secondary accent, zone-grade markers */ --gold: #D4BC78; /* ForeShiloh gold: signal grade, brand moments, progress */ --gold-deep: #B89D55; /* gold text on light surfaces (contrast-safe) */ --gold-ink: #2A2109; /* text on gold backgrounds */ /* Signals (data colours: green and red only, per brand rule) */ --win: #15803d; --win-soft: #dcfce7; --loss: #b91c1c; --loss-soft: #fee2e2; --loss-flash-dark: #7f1212; /* pulse partner for the red-folder banner */ /* Lines */ --hairline: rgba(26, 23, 18, 0.10); /* Gradients */ --green-gradient: linear-gradient(150deg, #232019 0%, #14110B 100%); /* dark-luxe hero cards */ --gold-gradient: linear-gradient(135deg, #F6EAC2 0%, #D4BC78 40%, #B89D55 66%, #997F3E 100%); --gold-sheen: linear-gradient(110deg, #9A7B3A 0%, #C9A94E 28%, #F4E7C0 46%, #C9A94E 62%, #9A7B3A 100%); /* Typography */ --font-display: 'Instrument Serif', serif; /* screen titles, brand, italic for emphasis */ --font-body: 'Manrope', sans-serif; /* all prose and UI copy */ --font-mono: 'IBM Plex Mono', monospace; /* every number, price, label chip */ /* Type scale */ --text-title: 1.875rem; /* screen titles, display font */ --text-card-title: 1.25rem; /* card headings, display font */ --text-body: 0.8125rem; /* 13px, standard UI copy */ --text-small: 0.75rem; /* 12px, secondary copy */ --text-micro: 9px; /* microlabels, mono, uppercase, letter-spacing .22em */ /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; /* Radii */ --radius-card: 18px; --radius-inner: 12px; --radius-pill: 9999px; --radius-phone: 44px; /* Shadows */ --shadow-card: 0 6px 20px -6px rgba(26, 23, 18, 0.10), 0 1px 3px rgba(26, 23, 18, 0.05); --shadow-elevated: 0 24px 60px -20px rgba(26, 23, 18, 0.22), 0 4px 16px rgba(26, 23, 18, 0.08); --shadow-gold: 0 24px 70px -16px rgba(212, 188, 120, 0.42), 0 4px 16px rgba(26, 23, 18, 0.12); /* Motion */ --flash-speed: 1s; /* proximity + timer flash */ --pulse-speed: 1.2s; /* red folder banner */ --shimmer-speed: 5.5s; /* gold sheen sweep */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Sovereign themes: accents and modes (16 Aug 2026) ────────────────────── data-accent on : gold (default) | mono | blue data-mode on : light (default) | dark Her edition adds: lilac | orchid | blush, same machinery. */ [data-accent="mono"] { --green: #1A1712; --green-mid: #4A4A4A; --gold: #C9C9C9; --gold-deep: #5E5E5E; --gold-ink: #111111; --gold-gradient: linear-gradient(135deg, #EDEDED 0%, #C9C9C9 45%, #9A9A9A 100%); --gold-sheen: linear-gradient(110deg, #8A8A8A 0%, #C4C4C4 28%, #F2F2F2 46%, #C4C4C4 62%, #8A8A8A 100%); --shadow-gold: 0 24px 70px -16px rgba(120, 120, 120, 0.35), 0 4px 16px rgba(26, 23, 18, 0.12); } [data-accent="blue"] { --green: #101B33; --green-mid: #3D63B8; --gold: #6E93E0; --gold-deep: #3D63B8; --gold-ink: #0B1428; --gold-gradient: linear-gradient(135deg, #C7D7F6 0%, #6E93E0 45%, #3D63B8 100%); --gold-sheen: linear-gradient(110deg, #33549E 0%, #5B84D6 28%, #C7D7F6 46%, #5B84D6 62%, #33549E 100%); --shadow-gold: 0 24px 70px -16px rgba(61, 99, 184, 0.4), 0 4px 16px rgba(26, 23, 18, 0.12); --green-gradient: linear-gradient(150deg, #16233F 0%, #0B1428 100%); } [data-mode="dark"] { --paper: #14120E; --card: #1E1B15; --panel: #2A251C; --ink: #F2EEE4; --ink-60: rgba(242, 238, 228, 0.64); --ink-45: rgba(242, 238, 228, 0.46); --ink-35: rgba(242, 238, 228, 0.34); --hairline: rgba(242, 238, 228, 0.12); --win-soft: rgba(21, 128, 61, 0.22); --loss-soft: rgba(185, 28, 28, 0.22); --win: #4ADE80; --loss: #F87171; --shadow-card: 0 6px 20px -6px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4); } [data-mode="dark"] { color-scheme: dark; } [data-mode="dark"][data-accent="gold"], [data-mode="dark"]:not([data-accent]) { --gold-deep: #D4BC78; /* gold text must brighten on dark ground */ --green: #3A342A; /* primary buttons stay visible */ } [data-mode="dark"][data-accent="mono"] { --gold-deep: #C9C9C9; --green: #3A3A3A; } [data-mode="dark"][data-accent="blue"] { --gold-deep: #8FAFF0; --green: #24365C; } /* ── Her wardrobe: lilac, orchid, blush (each pairs with data-mode) ── */ [data-accent="lilac"] { --green: #2E2350; --green-mid: #8B7BB8; --gold: #A995D6; --gold-deep: #7C6BA8; --gold-ink: #241B3E; --gold-gradient: linear-gradient(135deg, #E4DAF6 0%, #A995D6 45%, #7C6BA8 100%); --gold-sheen: linear-gradient(110deg, #6B5A98 0%, #A995D6 28%, #EFE8FB 46%, #A995D6 62%, #6B5A98 100%); --shadow-gold: 0 24px 70px -16px rgba(124, 107, 168, 0.4), 0 4px 16px rgba(26, 23, 18, 0.12); --green-gradient: linear-gradient(150deg, #35295C 0%, #241B3E 100%); } [data-accent="orchid"] { --green: #4A1F38; --green-mid: #B06390; --gold: #C77AA5; --gold-deep: #A5527E; --gold-ink: #38152A; --gold-gradient: linear-gradient(135deg, #F2D5E6 0%, #C77AA5 45%, #A5527E 100%); --gold-sheen: linear-gradient(110deg, #914670 0%, #C77AA5 28%, #F9E9F2 46%, #C77AA5 62%, #914670 100%); --shadow-gold: 0 24px 70px -16px rgba(165, 82, 126, 0.4), 0 4px 16px rgba(26, 23, 18, 0.12); --green-gradient: linear-gradient(150deg, #542540 0%, #38152A 100%); } [data-accent="blush"] { --green: #4E241B; --green-mid: #C57E6F; --gold: #D69485; --gold-deep: #B96D5E; --gold-ink: #3C1B13; --gold-gradient: linear-gradient(135deg, #F5DCD5 0%, #D69485 45%, #B96D5E 100%); --gold-sheen: linear-gradient(110deg, #A25B4C 0%, #D69485 28%, #FBEBE6 46%, #D69485 62%, #A25B4C 100%); --shadow-gold: 0 24px 70px -16px rgba(185, 109, 94, 0.4), 0 4px 16px rgba(26, 23, 18, 0.12); --green-gradient: linear-gradient(150deg, #5A2C21 0%, #3C1B13 100%); } [data-mode="dark"][data-accent="lilac"] { --gold-deep: #C4B2EC; --green: #3B2F63; } [data-mode="dark"][data-accent="orchid"] { --gold-deep: #E0A2C4; --green: #5C2A46; } [data-mode="dark"][data-accent="blush"] { --gold-deep: #ECB4A6; --green: #623225; }