/* DrawBridge design tokens — extended set. Skin slots (--db-color-* / --db-font-*) are injected by the branding engine in base.html from branding.toml. Everything here DERIVES from those slots and must never use hardcoded hex. The eight calendar project-type slots (--db-color-type-inhouse, -offsite, -xl, -alliance, -event, -shipout, -remote, -supply) are injected the same way. The calendar chips paint var(--db-color-type-*) from a color_token the server hands them; the type_of_project -> token binding lives in app/calendar/type_colors.py. */ :root { /* --- Ink scale — green-cast charcoal (dark to light) --- */ --ink-1000: #060907; --ink-900: var(--db-color-background); --ink-850: #0E1410; --ink-800: var(--db-color-surface); --ink-700: #18221B; --ink-600: #1F2C22; --ink-500: #2C3D31; --ink-400: #3E5446; /* --- Hairlines and borders ----------------------------- */ --line-faint: rgba(220, 255, 235, 0.06); --line: rgba(220, 255, 235, 0.10); --line-strong: rgba(220, 255, 235, 0.17); --line-solid: #233029; /* --- Green — the one accent ---------------------------- */ --green-700: #1FA354; --green-600: #2BC465; --green-500: var(--db-color-accent); --green-400: #66EC99; --green-300: #9CF4BE; --green-deep: #123524; --green-soft: rgba(61, 226, 123, 0.12); --green-edge: rgba(61, 226, 123, 0.35); /* --- Tier dots (War Table crew, V's walkthrough call) --- */ --lime-400: #A3E635; --purple-400: #A78BFA; /* --- Paint swatches (Admin Station unit rows) ----------- The colour a vehicle actually IS, mapped from the colour word on the card — "a five-truck fleet is five rows, not one vague '5 units'" (Admin Station design README §3). These are PAINT, not meaning: a red truck is --paint-red, never --critical, so the surface's one alarm colour can never be spent on a customer's choice of vinyl. The values are the Claude Design prototype's own swatch map (Admin Station.dc.html line 1218), and they live HERE because this file is the skin-slot block the §6 class grammar allows raw hex in. An unrecognised colour word falls back to --line-strong (a hairline, honestly saying "unknown"). */ --paint-white: #F2F2ED; --paint-black: #181812; --paint-silver: #C7CCD1; --paint-grey: #8A9099; --paint-red: #C64A3F; --paint-blue: #3E6DB0; --paint-green: #3E9D6B; --paint-charcoal: #3A3D42; /* --- Text on dark -------------------------------------- */ --text-1: var(--db-color-text); --text-2: #AFBFB4; --text-3: var(--db-color-muted); --text-4: #57675D; --text-on-accent: #04130A; /* --- Semantic status ----------------------------------- */ --positive: #51DD8E; --positive-soft: rgba(81, 221, 142, 0.13); --caution: #E9C25B; --caution-soft: rgba(233, 194, 91, 0.13); --critical: #F0645A; --critical-soft: rgba(240, 100, 90, 0.13); --info: #5FB2EE; --info-soft: rgba(95, 178, 238, 0.13); /* --- Semantic aliases ---------------------------------- */ --bg-app: var(--ink-900); --bg-floor: var(--ink-1000); --surface: var(--ink-800); --surface-raised: var(--ink-700); --surface-sunken: var(--ink-850); --surface-hover: var(--ink-600); --border: var(--line); --border-strong: var(--line-strong); --accent: var(--green-500); --accent-hover: var(--green-400); --accent-press: var(--green-600); --text-body: var(--text-2); --text-heading: var(--text-1); --text-label: var(--text-3); --focus-ring: var(--green-500); /* --- Ambient glow — page atmosphere -------------------- */ --bg-app-glow: radial-gradient(1100px 700px at 75% -10%, rgba(31, 163, 84, 0.16), transparent 62%), radial-gradient(900px 620px at -10% 105%, rgba(18, 53, 36, 0.55), transparent 60%), var(--ink-900); /* --- Spacing scale (4px base) -------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* --- Radii — rounded, premium -------------------------- */ --radius-1: 8px; --radius-2: 12px; --radius-3: 16px; --radius-4: 22px; --radius-pill: 999px; /* --- Border widths ------------------------------------- */ --border-1: 1px; --border-2: 2px; /* --- Elevation — dark, soft, restrained ---------------- */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --glow-focus: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--green-edge); --glow-accent: 0 0 0 1px var(--green-edge), 0 0 32px rgba(61, 226, 123, 0.22); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%); /* --- Motion — quick, mechanical ------------------------ */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 90ms; --dur-2: 160ms; --dur-3: 260ms; /* --- Layout -------------------------------------------- */ --container: 1320px; --gutter: 24px; --sidebar-w: 248px; --rail-w: 56px; --header-h: 64px; /* --- Typography families (derive from skin slots) ------ */ --font-display: var(--db-font-heading); --font-sans: var(--db-font-body); --font-mono: var(--db-font-mono); --font-dotted: "Cygnito Mono Pro Dotted", "Cygnito Mono Pro", monospace; /* --- Type scale (px) ----------------------------------- */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 26px; --text-2xl: 34px; --text-3xl: 46px; --text-4xl: 64px; --text-5xl: 88px; --text-6xl: 120px; /* --- Weights ------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* --- Line heights --------------------------------------- */ --leading-none: 1.0; --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* --- Letter spacing ------------------------------------ */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono: 0.02em; --tracking-label: 0.18em; }