/* ============================================================================ CT Wallboard — Design System Tokens ---------------------------------------------------------------------------- Single source of truth for the visual language: colour, type, spacing, radius, shadow, motion. Variables only — NO component styles live here. Derived from the approved mockups (CT Wallboard Designs/index.html). Colours are authored in oklch for perceptually-even lightness/chroma. ============================================================================ */ /* Fonts referenced by the type tokens below. */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Lexend:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap"); :root { /* ---------------------------------------------------------------- Colour */ /* Surfaces */ --color-frame: #0a0807; /* bezel behind the board */ --color-bg: oklch(0.96 0.025 75); --color-bg-2: oklch(0.93 0.035 70); --color-card: oklch(0.985 0.018 75); --color-card-2: oklch(0.99 0.012 80); /* Page background (warm radial wash used on the board surface) */ --app-bg: radial-gradient(ellipse 1400px 800px at 85% 110%, oklch(0.90 0.05 55 / 0.45), transparent 60%), radial-gradient(ellipse 1100px 700px at 0% 0%, oklch(0.97 0.03 80 / 0.7), transparent 55%), linear-gradient(180deg, oklch(0.97 0.025 75), oklch(0.945 0.03 70)); /* Ink (text) */ --color-ink: oklch(0.28 0.06 55); --color-ink-soft: oklch(0.42 0.07 55); --color-ink-mute: oklch(0.58 0.04 60); --color-on-primary: oklch(0.98 0.02 70); /* text on primary/gradient cards */ /* Brand */ --color-primary: oklch(0.52 0.135 50); --color-primary-2: oklch(0.62 0.125 55); /* Lines / borders */ --color-line: oklch(0.78 0.04 60); --color-line-soft: oklch(0.86 0.03 65); --color-row-line: oklch(0.92 0.02 70); /* subtle divider inside lists */ /* Agent status */ --color-available: oklch(0.66 0.14 145); /* green */ --color-oncall: oklch(0.72 0.14 75); /* amber */ --color-away: oklch(0.65 0.12 240); /* sky */ --color-break: oklch(0.68 0.13 30); /* coral */ --color-offline: oklch(0.70 0.005 60); /* grey */ /* Trend deltas */ --color-up: var(--color-available); --color-down: var(--color-break); /* Caller-type categories — surface (bg) + label (fg) for pills, + solid dot. (Maps to wallboard.dim_category: volunteer / pet_owner / fosterer.) */ --cat-volunteer-bg: oklch(0.94 0.05 145); --cat-volunteer-fg: oklch(0.38 0.12 145); --cat-volunteer: oklch(0.55 0.16 145); --cat-petowner-bg: oklch(0.94 0.06 40); --cat-petowner-fg: oklch(0.40 0.14 40); --cat-petowner: oklch(0.58 0.16 40); --cat-fosterer-bg: oklch(0.94 0.05 240); --cat-fosterer-fg: oklch(0.40 0.12 240); --cat-fosterer: oklch(0.55 0.15 240); /* Waiting / attention accent (e.g. callers in queue) */ --color-wait-bg: oklch(0.95 0.05 30); --color-wait-fg: oklch(0.42 0.13 30); /* Call trail — what happened at each place a call reached. bg/fg pairs, same convention as the category pills above. Hue is doing the semantic work: brand for the way in, green for the conversation, sky for a completed hand-off, amber for something in progress, and no hue at all for a place the call only passed through. Chroma stays low on the last two so a five-way fan-out reads as one thing rather than five alarms. */ --trail-queue-bg: oklch(0.95 0.04 50); /* entered here */ --trail-queue-fg: oklch(0.42 0.13 50); --trail-talking-bg: oklch(0.93 0.06 145); /* answered, still on the call */ --trail-talking-fg: oklch(0.36 0.13 145); --trail-passed-bg: oklch(0.94 0.045 240); /* answered, then handed on */ --trail-passed-fg: oklch(0.38 0.12 240); --trail-ringing-bg: oklch(0.94 0.07 75); /* alerting right now */ --trail-ringing-fg: oklch(0.42 0.13 75); --trail-missed-bg: oklch(0.955 0.006 60); /* rang, nobody picked up */ --trail-missed-fg: oklch(0.63 0.02 60); --trail-unknown-bg: oklch(0.965 0.012 70); /* the live model cannot say */ --trail-unknown-fg: oklch(0.55 0.03 60); /* ------------------------------------------------------------ Typography */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Lexend", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Type scale (px values from the mockups; big sizes suit a wall display) */ --text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 22px; --text-3xl: 24px; --text-4xl: 28px; --text-5xl: 32px; --display-sm: 44px; --display-md: 56px; --display-lg: 88px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Letter spacing */ --tracking-tight: -0.03em; /* big display numerals */ --tracking-display: -0.015em; /* headings */ --tracking-normal: 0; --tracking-wide: 0.08em; /* small caps labels */ --tracking-eyebrow: 0.16em; /* eyebrow / overline */ /* Line heights */ --leading-none: 0.9; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; /* --------------------------------------------------------------- Spacing */ /* 4px base scale + the half-steps the mockups use. */ --space-0: 0; --space-px: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-4-5: 18px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Outer board padding */ --board-pad: var(--space-8); /* ---------------------------------------------------------------- Radius */ --radius-sm: 14px; --radius: 22px; --radius-lg: 32px; --radius-pill: 999px; /* --------------------------------------------------------------- Shadows */ --shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 14px 28px -16px oklch(0.30 0.06 50 / 0.18); --shadow-raised: 0 14px 30px -16px oklch(0.40 0.12 40 / 0.5); --shadow-avatar: 0 0 0 3px var(--color-bg), 0 4px 10px -4px oklch(0.30 0.06 50 / 0.3); /* ---------------------------------------------------------------- Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 600ms; --dur-rotate: 12000ms; /* screen auto-rotate dwell */ }