/* ============================================================================ tokens.css — Covee Employee App THE ONLY FILE IN THIS PROJECT ALLOWED TO CONTAIN A COLOUR LITERAL. White-labelling a tenant = override the four --brand-* vars at the bottom. Values are canonical brand, sourced from covee3_84.html and Dashboard.svg. See DESIGN.md §2, §3, §5, §6, §7. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap'); :root { /* ── Core palette — Covee Brand Guidelines p.22 ───────────────────────── */ --ink: #252A4D; /* Deep Navy — ink, buttons, the hero surface */ --ink-soft: #3B3F6B; /* on-navy dividers, tracks */ --ink-2: #4A4E78; /* on-navy secondary fill */ --sky: #45BFDB; /* Covee Teal — THE accent: CTA, active, progress */ --gold: #FFE55F; /* Covee Yellow — CONTENT ONLY. See note below. */ /* ── Accents palette — Brand Guidelines p.25 ────────────────────────────── "Use accents selectively. They should add meaning and energy to the system without competing with Covee's primary colours." */ --lav: #CBC5E4; /* Lavender — softer, advisory. Backgrounds only. */ --violet: #6B0088; /* Violet — controlled disruption, emphasis */ --sky-deep: #1C84A2; /* Deep Teal — richer connection and care */ /* ── Derived, not brand. Each exists because a brand value misses AA. ───── Deep Teal #1C84A2 is 4.21:1 on Soft White — fine for large text and for icon strokes, short of the 4.5:1 that 15px links and 11.5px chips need. --sky-ink is Deep Teal darkened until it clears AA on both grounds: 5.30:1 on --paper, 4.80:1 on --info-bg. It also carries the pressed state of the primary button, where white-on-Deep-Teal would be only 4.31:1. */ /* Darkened again when cards became glass at .62: composited over the ground's violet end, the previous #17738D read 4.4:1. Now 4.85:1 there, 6.06:1 on White, 5.36:1 on --info-bg. */ --sky-ink: #156B83; --sky-lift: #6FD0E6; /* Covee Teal lifted, for hover on a navy ground */ /* ── Neutral palette — Brand Guidelines p.24 ────────────────────────────── "Use the neutral palette to support the brand, not compete with it, giving Covee's primary colours room to signal what matters." Brand Ink #111213 is the darkest neutral; this app sets text in Deep Navy instead, matching Dashboard.svg and the guidelines' own headings. Soft White and Mist are the values STATED on the Full Palette (p.27), not the fills rendered on p.24 (#FDFCFD / #D6E9F8) — those carry the same compression drift as the Core palette's swatches. */ --paper: #F9F9F9; /* Soft White */ --surface: #FFFFFF; /* White */ --mist: #CDE5FF; /* Mist — a surface tint, never a hairline */ /* Derived neutrals: the brand names four, a UI needs sunk/hover/border steps. */ --surface-sunk: #F2F5F9; --surface-hover: #F5F8FB; --line: #E2E9F1; --line-strong: #CFDAE7; /* ── Text — contrast measured against --paper ────────────────────────── */ /* --text-3 and --ok were darkened alongside --sky-ink for the same reason: a .62 glass fill over the ground's violet end left them at 4.4 and 4.3. Contrast figures below are against White; the glass case is tighter and is the one that set these values. */ --text: #252A4D; /* 13.2:1 */ --text-2: #5B6373; /* 5.7:1 */ --text-3: #5D6383; /* darkened for glass — see note below */ --text-mute: #686E8D; /* placeholders + disabled labels. Was #8B90AB, which read 3.15:1 on white as a placeholder — placeholders are real content and are not covered by WCAG's disabled-control exemption. Now 4.99:1 on white, 4.57:1 on --surface-sunk. Disabled state stays legible as disabled through its sunk background, not-allowed cursor and aria-disabled. */ --text-on-ink: #FFFFFF; /* 13.2:1 on --ink */ --text-on-ink-2: #CBC5E4; /* 8.3:1 on --ink */ /* ── Semantic ────────────────────────────────────────────────────────── */ --ok: #0C6E47; /* darkened for glass */ --ok-bg: #E4F3EC; --warn: #B45309; /* 4.8:1 */ --warn-bg: #FFF6CE; --danger: #A5342A; /* 6.4:1 */ --danger-bg: #FBEBE8; --info-bg: #E3F4F9; /* ── RGB helpers — every rgba() in the project resolves through these ── */ --ink-rgb: 37, 42, 77; --sky-rgb: 69, 191, 219; --lav-rgb: 203, 197, 228; --surface-rgb: 255, 255, 255; --danger-rgb: 165, 52, 42; --sky-deep-rgb: 28, 132, 162; --violet-rgb: 107, 0, 136; /* ── Gradient palette — Brand Guidelines p.26 ───────────────────────────── "Use gradients for moments of emphasis, atmosphere and transition — never as decoration alone. They should make the brand feel more dynamic while keeping information clear and controlled." The brand names two: Light (Mist → Lavender) and Deep (Deep Teal → Violet). Neither is stored as a ready-made token, because neither is used at full strength anywhere: Light — the ground applies it as corner blooms with per-stop alphas (base.css .aura), not as a single linear ramp. Full-bleed put Lavender under body copy at 4.2:1. Deep — hero surfaces need it veiled (below); the flex ring builds it from --sky-deep and --violet directly, because an SVG stroke takes colour stops, not a CSS gradient. A token for a value nothing can use is a token that drifts. */ /* The Deep Gradient veiled over Deep Navy, for surfaces that carry text. At full strength the Deep Teal end is 4.31:1 against PURE WHITE — no text colour clears AA there, so a full-strength hero cannot hold 13px copy. Veiled at .50 the teal end gives white 7.8:1 and Lavender 4.7:1; .55 already drops Lavender to 4.4:1. Measured, not guessed. 315deg puts Violet at the top-left where card text lives. */ --grad-deep-veil: linear-gradient(315deg, rgba(var(--sky-deep-rgb), .5) 0%, rgba(var(--violet-rgb), .5) 100%); /* Unveiled Deep Gradient for small progress moments (tracks and fills). */ --grad-progress: linear-gradient(90deg, var(--sky-deep) 0%, var(--violet) 100%); --grad-login-cta: linear-gradient(105deg, var(--sky-ink) 0%, var(--sky-deep) 46%, var(--violet) 100%); --grad-login: radial-gradient(90% 70% at 50% 30%, rgba(var(--violet-rgb), .82) 0%, rgba(var(--violet-rgb), .24) 54%, rgba(var(--violet-rgb), 0) 78%), radial-gradient(75% 70% at 88% 78%, rgba(var(--sky-deep-rgb), .38) 0%, rgba(var(--sky-deep-rgb), 0) 70%), linear-gradient(145deg, var(--ink) 0%, var(--violet) 58%, var(--ink) 100%); /* ── Typography ──────────────────────────────────────────────────────── */ /* Brand Guidelines p.33 / p.35: Instrument Sans primary, Riccione Serial secondary. Riccione Serial is commercial and cannot be web-loaded here; Newsreader stands in for it. Fredoka, which the marketing site uses for the wordmark, is not a brand typeface and has been removed. */ --font-brand: "Instrument Sans", -apple-system, sans-serif; --font-ui: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --font-fig: "Newsreader", Georgia, "Times New Roman", serif; --fs-figure-xl: 52px; --lh-figure-xl: 1.02; --fs-figure-l: 34px; --lh-figure-l: 1.1; --fs-figure-m: 22px; --lh-figure-m: 1.2; --fs-display-l: 30px; --lh-display-l: 1.14; --fs-display-m: 24px; --lh-display-m: 1.2; --fs-title: 17px; --lh-title: 1.3; --fs-body: 15px; --lh-body: 1.55; --fs-body-s: 13px; --lh-body-s: 1.5; --fs-label: 11px; --lh-label: 1.2; --fs-micro: 11.5px;--lh-micro: 1.35; /* ── Spacing — 4-based, no ad-hoc values ─────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 14px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* ── Radii — concentric: inner = outer − padding ─────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ── Elevation — navy-tinted, never neutral grey ─────────────────────── */ --e0: none; --e1: 0 1px 2px rgba(var(--ink-rgb), .04), 0 6px 16px -8px rgba(var(--ink-rgb), .10); --e2: 0 2px 4px rgba(var(--ink-rgb), .05), 0 14px 30px -12px rgba(var(--ink-rgb), .16); /* Hover elevation needs a distinctly stronger penumbra than --e2: it is the confirmation that a surface is actionable, not merely resting above the page. Kept as a token so cards and list rows rise consistently. */ --e-hover: 0 4px 9px rgba(var(--ink-rgb), .07), 0 22px 44px -14px rgba(var(--ink-rgb), .24); --e-hero: 0 18px 40px -16px rgba(var(--ink-rgb), .45); --e-nav: 0 -2px 16px -6px rgba(var(--ink-rgb), .10); --e-sheet: 0 -12px 44px -12px rgba(var(--ink-rgb), .28); /* ── Motion — L2 ─────────────────────────────────────────────────────── */ --t-tap: 120ms; --t-hover: 180ms; --t-reveal: 260ms; --t-screen: 380ms; --t-sheet: 420ms; --t-figure: 900ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --focus-ring: 3px solid rgba(var(--sky-rgb), .55); /* ── Frame ───────────────────────────────────────────────────────────── */ --frame-w: 390px; --frame-h: 844px; --appbar-h: 56px; /* ── WHITE-LABEL SURFACE ───────────────────────────────────────────────── A tenant theme overrides only these four. --brand-accent-fg is recomputed from accent luminance by app.js, so a dark tenant accent never lands white-on-white. See DESIGN.md §2 and PLAN.md §5. */ --brand-accent: var(--sky); --brand-accent-fg: var(--ink); --brand-mark-bg: var(--sky); }