/* ═══════════════════════════════════════════════════════════════════════════ VideoForge — PALETTE TOKENS The single definition of the colour system. Loaded first by every page (app, landing, login, admin) so there is exactly one place to change a colour. style.css, forge.css, auth.css and login-forge.css consume these and define none of their own. The system is a soft grade over an ink-and-paper base. Structure is still carried by contrast and weight — but the light in the room is coloured: one working accent (a soft periwinkle) for everything interactive, and three graded pastels — powder, lilac, blush — that appear only as light: the ambient fields, the hero wash, the calibration bars. Nothing in the system is saturated enough to shout. ═══════════════════════════════════════════════════════════════════════════ */ :root { --radius: 12px; --radius-sm: 9px; --font: 'Inter Tight', 'Inter', -apple-system, sans-serif; --display: 'Archivo', 'Helvetica Neue', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --transition: cubic-bezier(0.22, 1, 0.36, 1); } /* ── DARK (default) ──────────────────────────────────────────── A violet-black room lit by pastel light. The elevation ladder keeps its real steps; each rung now carries a barely-there violet cast so the greys read as one material rather than four unrelated greys. The accent is a periwinkle pale enough to take dark ink on a fill — a pastel button on near-black, not a glowing one. */ :root, :root[data-theme="dark"] { /* Elevation light is periwinkle-tinted, not pure white — every border, surface wash and scrollbar downstream of it carries the hue, which is what keeps a resting screen (no buttons, no selections) from reading as black-and-white. */ --elev: 224,229,255; --shadow-rgb: 6,6,12; --shadow-k: 1; --bg: #0B0B14; /* page */ --bg-2: #15151F; /* raised panel */ --bg-3: #1C1C29; /* inset / well */ --bg-4: #272738; /* top layer */ --bg-rgb: 11,11,20; --bg-2-rgb: 21,21,31; --bg-3-rgb: 28,28,41; --bg-4-rgb: 39,39,56; --muted-rgb: 163,161,180; --text: #EFEEF6; --text-muted: #A3A1B4; --text-dim: #817F92; /* Accent = vivid periwinkle-indigo. Bright enough to be unmistakably colour, pale enough to take dark ink on a fill. */ --accent: #8F97FF; --accent-rgb: 143,151,255; --accent-2: #6F78E8; --accent-2-rgb: 111,120,232; --accent-dark: #5A63D8; --accent-ink: #10101C; --accent-glow: rgba(143,151,255,0.22); --purple: #B79CF7; --purple-rgb: 183,156,247; --purple-glow: rgba(183,156,247,0.16); --teal: #7CC4F5; --teal-rgb: 124,196,245; --teal-2: #A3D8FA; /* The grade — three hues that appear as light. Saturated enough to read as colour at a glance; the low alphas keep them soft. Triplets feed the ambient fields; hexes feed gradient washes. */ --field-1: 110,150,255; /* powder */ --field-2: 168,128,250; /* lilac */ --field-3: 250,140,190; /* blush */ --wash-1: #7FB2F5; --wash-2: #A78BFA; --wash-3: #F08BB8; --surface: rgba(var(--elev),0.045); --surface-2: rgba(var(--elev),0.085); --surface-3: rgba(var(--elev),0.06); --border: rgba(var(--elev),0.11); --border-2: rgba(var(--elev),0.22); --border-soft: rgba(var(--elev),0.07); /* Depth. A raised surface catches light on its top edge — that hairline is what separates a card from its background when the two are only a few percent apart in value. */ --lift: inset 0 1px 0 rgba(var(--elev),0.07); --lift-strong: inset 0 1px 0 rgba(var(--elev),0.12); --shadow-1: 0 1px 2px rgba(var(--shadow-rgb),calc(.30 * var(--shadow-k))); --shadow-2: 0 4px 12px rgba(var(--shadow-rgb),calc(.34 * var(--shadow-k))), 0 1px 3px rgba(var(--shadow-rgb),calc(.24 * var(--shadow-k))); --shadow-3: 0 14px 34px rgba(var(--shadow-rgb),calc(.42 * var(--shadow-k))), 0 3px 8px rgba(var(--shadow-rgb),calc(.28 * var(--shadow-k))); --shadow-4: 0 32px 68px rgba(var(--shadow-rgb),calc(.52 * var(--shadow-k))), 0 8px 20px rgba(var(--shadow-rgb),calc(.32 * var(--shadow-k))); /* Status — real colour where colour is mandatory: green means done and money, and it should look green. */ --green: #3ECF8E; --green-rgb: 62,207,142; --green-2: #6FE0AC; --red: #E08B82; --red-rgb: 224,139,130; --red-2: #F0AFA8; --warn: #E3C077; --warn-rgb: 227,192,119; --warn-2: #F0D69E; /* Ambient intensity (see ambient.css). Dark carries brighter pools because they read as light; light mode needs far less. */ --aurora-a: 0.65; --grain-a: 0.055; } /* ── LIGHT ────────────────────────────────────────────────────── Lavender-mist paper with white cards. The accent deepens to an indigo-periwinkle so a filled button holds white ink at 6:1, and the grade deepens with it — pastel light on paper needs more pigment to register than pastel light in a dark room. */ :root[data-theme="light"] { /* Same idea inverted: the "ink" that draws borders and surface washes is violet-leaning, so hairlines on paper read faintly lavender. */ --elev: 32,32,62; --shadow-rgb: 30,30,52; --shadow-k: 0.20; --bg: #F1F0F7; /* page */ --bg-2: #FFFFFF; /* raised panel */ --bg-3: #F7F6FC; /* inset / well */ --bg-4: #E5E4F0; /* top layer */ --bg-rgb: 241,240,247; --bg-2-rgb: 255,255,255; --bg-3-rgb: 247,246,252; --bg-4-rgb: 229,228,240; --muted-rgb: 92,90,108; --text: #17171F; --text-muted: #5C5A6C; --text-dim: #77758A; --accent: #4F55C8; --accent-rgb: 79,85,200; --accent-2: #6A70D8; --accent-2-rgb: 106,112,216; --accent-dark: #3A40A8; --accent-ink: #FFFFFF; --accent-glow: rgba(79,85,200,0.18); --purple: #6D51C8; --purple-rgb: 109,81,200; --purple-glow: rgba(109,81,200,0.14); --teal: #2E7CB8; --teal-rgb: 46,124,184; --teal-2: #205E90; --field-1: 96,132,220; /* powder */ --field-2: 140,110,230; /* lilac */ --field-3: 225,120,170; /* blush */ --wash-1: #3B6BB5; --wash-2: #6D51C8; --wash-3: #B84B7E; --surface: rgba(var(--elev),0.04); --surface-2: rgba(var(--elev),0.075); --surface-3: rgba(var(--elev),0.05); --border: rgba(var(--elev),0.13); --border-2: rgba(var(--elev),0.26); --border-soft: rgba(var(--elev),0.09); /* On paper the light comes from above, so a raised surface gets a white top edge rather than a dark one. */ --lift: inset 0 1px 0 rgba(255,255,255,0.9); --lift-strong: inset 0 1px 0 rgba(255,255,255,1); --green: #0E8A5B; --green-rgb: 14,138,91; --green-2: #0A6B47; --red: #B0463C; --red-rgb: 176,70,60; --red-2: #8E352C; --warn: #8A6D2B; --warn-rgb: 138,109,43; --warn-2: #6E561F; --aurora-a: 0.50; --grain-a: 0.030; }