/* ========================================================================== Daena Agency — Design Tokens The single source of truth for brand. Change values here, not in components. DIRECTION: after dark. A room at night, lit badly and beautifully. The reference is a venue at 11pm — sodium lamps outside, teal spill from the stage, everything sitting in warm shadow with grain over the top. The critical discipline: colour comes from *light*, and light is textured. Any large field of colour must have grain over it. A clean CSS gradient on a dark background is the exact look we are running away from. Rules of thumb when extending this: - Warm the blacks. Never #000, never blue-black. - Amber is the only colour that shouts. Teal supports. Nothing else. - Grain over every wash. No bare radial gradients. - Borders are hairlines. Weight comes from type, not chrome. ========================================================================== */ :root { /* --------------------------------------------------------------- COLOR — Palette Stock = the dark the room is painted. Warm, never neutral. --------------------------------------------------------------- */ /* Stock ramp — warm near-black up to warm off-white */ --stock-950: #0A0806; --stock-900: #0D0B08; /* page */ --stock-850: #131009; --stock-800: #1A1610; /* raised surface */ --stock-700: #241F17; --stock-600: #352E23; --stock-500: #4E4536; --stock-400: #6F6553; --stock-300: #968B76; --stock-200: #BFB6A3; --stock-100: #DED6C6; --stock-050: #F3EDE2; /* type */ /* Sodium — the streetlamp. The one colour allowed to shout. */ --sodium-700: #8A5606; --sodium-600: #C27F12; --sodium-500: #F0A32B; /* primary */ --sodium-400: #FFBC55; --sodium-100: #FFE3B4; /* Stage teal — spill from the lighting rig. Supporting only. */ --teal-700: #0E4C4A; --teal-500: #1C8A85; --teal-400: #35B3AC; --teal-100: #BFE6E3; /* Status */ --success-500: #4FA36A; --warning-500: var(--sodium-500); --danger-500: #E2564A; /* Legacy aliases — interior pages still reference these names. Remapped so nothing renders in a retired scheme. */ --ink-950: var(--stock-950); --ink-900: var(--stock-900); --ink-800: var(--stock-800); --ink-700: var(--stock-700); --ink-600: var(--stock-600); --ink-500: var(--stock-500); --ink-400: var(--stock-400); --ink-300: var(--stock-300); --ink-200: var(--stock-200); --ink-100: var(--stock-100); --ink-050: var(--stock-050); --brand-700: var(--sodium-700); --brand-600: var(--sodium-600); --brand-500: var(--sodium-500); --brand-400: var(--sodium-400); --brand-300: var(--sodium-400); --brand-100: var(--sodium-100); --accent-600: var(--teal-700); --accent-500: var(--teal-500); --accent-400: var(--teal-400); --accent-100: var(--teal-100); --gold-600: var(--sodium-600); --gold-500: var(--sodium-500); --gold-100: var(--sodium-100); --cyan-500: var(--teal-400); --cyan-100: var(--teal-100); --press-500: var(--sodium-500); --press-600: var(--sodium-600); --stamp-500: var(--teal-500); --stock-base: var(--stock-900); --stock-card: var(--stock-800); --stock-kraft: var(--stock-700); --stock-white: var(--stock-050); /* --------------------------------------------------------------- COLOR — Semantic aliases (use THESE in components) --------------------------------------------------------------- */ --bg: var(--stock-900); --bg-raised: var(--stock-800); --bg-sunken: var(--stock-950); --surface: rgba(243, 237, 226, 0.045); --surface-hover: rgba(243, 237, 226, 0.085); --surface-strong: var(--stock-800); --text: var(--stock-050); --text-muted: rgba(243, 237, 226, 0.70); --text-subtle: rgba(243, 237, 226, 0.48); --text-inverse: var(--stock-950); --border: rgba(243, 237, 226, 0.15); --border-strong: rgba(243, 237, 226, 0.34); --border-brand: var(--sodium-500); --focus-ring: var(--sodium-500); /* Gradients — only ever used as *light*, always under grain. */ --gradient-brand: linear-gradient(var(--sodium-500), var(--sodium-500)); --gradient-brand-soft: linear-gradient(rgba(240,163,43,.16), rgba(240,163,43,.16)); --gradient-text: linear-gradient(var(--stock-050), var(--stock-050)); --gradient-hairline: linear-gradient(90deg, transparent, var(--border-strong), transparent); /* The room light. Two lamps: sodium high left, teal low right. */ --wash-room: radial-gradient(58% 46% at 20% 6%, rgba(240, 163, 43, 0.20) 0%, rgba(13, 11, 8, 0) 68%), radial-gradient(46% 40% at 88% 86%, rgba(28, 138, 133, 0.22) 0%, rgba(13, 11, 8, 0) 70%); --gradient-spotlight: var(--wash-room); /* --------------------------------------------------------------- NIGHT PRIMITIVES --------------------------------------------------------------- */ /* Film grain — heavy enough to be felt, not seen */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-opacity: 0.15; /* Marquee bulbs — the rail of lights around a venue sign */ --bulbs: radial-gradient(circle at 7px 7px, var(--sodium-500) 0 2.6px, transparent 3px); --bulbs-size: 20px 14px; /* Scan rule — fine diagonal texture for colour fields */ --scan: repeating-linear-gradient(115deg, rgba(10, 8, 6, 0.16) 0 2px, transparent 2px 9px); /* --------------------------------------------------------------- TYPOGRAPHY Display: Bebas Neue — condensed, all caps, marquee lettering Body: Instrument Sans — warm humanist grotesque, very legible small Mono: IBM Plex Mono — data, labels, timings --------------------------------------------------------------- */ --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif; --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type scale. Bebas is condensed, so display sizes run large without eating the same horizontal space a normal grotesque would. */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: clamp(1.0625rem, 0.2vw + 1rem, 1.125rem); /* 17–18 */ --text-lg: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem); /* 19–22 */ --text-xl: clamp(1.5rem, 1.1vw + 1.2rem, 2rem); /* 24–32 */ --text-2xl: clamp(1.875rem, 1.9vw + 1.35rem, 2.75rem); /* 30–44 */ --text-3xl: clamp(2.5rem, 3.4vw + 1.5rem, 4.25rem); /* 40–68 */ --text-4xl: clamp(3.25rem, 5.4vw + 1.6rem, 6.5rem); /* 52–104 */ --text-5xl: clamp(3.75rem, 8vw + 1.5rem, 9.375rem); /* 60–150 */ --leading-tight: 0.88; /* Bebas has almost no descender; it can take this */ --leading-snug: 1.0; --leading-normal: 1.5; --leading-relaxed: 1.68; --tracking-tighter: 0; --tracking-tight: 0.005em; --tracking-normal: 0; --tracking-wide: 0.1em; --tracking-widest: 0.24em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600; --weight-extrabold: 600; /* --------------------------------------------------------------- SPACE — 4px base grid --------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(3.5rem, 7vw, 7rem); --section-y-lg: clamp(4.5rem, 10vw, 10rem); /* --------------------------------------------------------------- LAYOUT --------------------------------------------------------------- */ --container: 1240px; --container-narrow: 800px; --container-wide: 1440px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --header-h: 74px; /* --------------------------------------------------------------- RADII — slight. Signage is cut, not rounded, but not razor sharp. --------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px; --radius-pill: 999px; /* --------------------------------------------------------------- ELEVATION — shadow is absence of light, so it is deep and soft. Amber "lamp" shadows only on things that are meant to glow. --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.8); --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.9); --shadow-lamp: 0 0 0 1px rgba(240, 163, 43, 0.35), 0 14px 44px -16px rgba(240, 163, 43, 0.45); --shadow-glow: var(--shadow-lamp); --shadow-glow-accent: 0 0 0 1px rgba(28, 138, 133, 0.35), 0 14px 44px -16px rgba(28, 138, 133, 0.45); /* --------------------------------------------------------------- MOTION --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 130ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-slower: 800ms; /* --------------------------------------------------------------- Z-INDEX --------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-grain: 9999; } /* -------------------------------------------------------------------------- Matinee — add data-theme="light" to The same room with the house lights up. Provided for completeness; the dark is the brand. -------------------------------------------------------------------------- */ [data-theme="light"] { --bg: #F3EDE2; --bg-raised: #FBF7EF; --bg-sunken: #E5DDCD; --surface: rgba(10, 8, 6, 0.04); --surface-hover: rgba(10, 8, 6, 0.08); --surface-strong: #FBF7EF; --text: var(--stock-950); --text-muted: rgba(10, 8, 6, 0.72); --text-subtle: rgba(10, 8, 6, 0.5); --text-inverse: var(--stock-050); --border: rgba(10, 8, 6, 0.16); --border-strong: rgba(10, 8, 6, 0.36); --grain-opacity: 0.07; --wash-room: radial-gradient(58% 46% at 20% 6%, rgba(240, 163, 43, 0.24) 0%, rgba(243, 237, 226, 0) 68%), radial-gradient(46% 40% at 88% 86%, rgba(28, 138, 133, 0.18) 0%, rgba(243, 237, 226, 0) 70%); --gradient-text: linear-gradient(var(--stock-950), var(--stock-950)); }