/* ══════════════════════════════════════════════════════════════════════ * PAYLINE BRAND TOKENS — SINGLE SOURCE OF TRUTH * ---------------------------------------------------------------------- * This file defines the canonical Payline brand palette ONCE. Every * surface (kiosk, master dashboard, operator dashboard, marketing) derives * its accent from the tokens below. Change the brand here → it flows * everywhere that imports this file. * * See DESIGN.md (repo root) for the full rationale, hue math, and the * per-context derivation table. Do NOT hardcode a brand teal/cyan anywhere * else — point at these variables instead. * * ORIGIN OF THE BRAND COLOR * The core brand hue is derived from the Payline logo lockup * (marketing/public/images/launch/payline-logo.png — the fork glyph + * "payline" wordmark). The glyph's gradient stroke is a saturated * teal-cyan; the wordmark ink is a deep navy. Those two are the most * defensible brand origin, so they anchor the system: * * --brand-primary : #12B5C9 (logo teal-cyan, HSL 186.6 / 83.6 / 42.9) * --brand-ink : #06122B (logo navy) * * ONE IDENTITY, CONTEXT-AWARE (Apple discipline) * Apple does not paint one literal hex on every surface — it keeps ONE * identity and lets system colors adapt to light vs dark. We do the same: * all three surfaces share the SAME hue (186.6°). Only lightness/saturation * shift, and every shift is provably derived from --brand-primary: * * • kiosk (on near-black) → BRIGHTENED (+10 L) so the accent glows * • dashboards (on white) → DEEPENED (−8 / −14 L) so it stays legible * * These derivations live as named tokens below AND are mirrored into each * surface's local --teal token, so legacy selectors keep working unchanged. * ══════════════════════════════════════════════════════════════════════ */ :root { /* ── CORE BRAND ───────────────────────────────────────────────────── */ --brand-primary: #12B5C9; /* THE Payline teal-cyan (logo-derived) */ --brand-primary-rgb: 18, 181, 201; --brand-ink: #06122B; /* THE Payline navy (logo wordmark ink) */ --brand-ink-2: #0A2E5C; /* lifted navy for gradients/hover on ink */ /* ── DERIVED: ON-DARK (kiosk lives on #000 / near-black) ────────────── * Same hue, brightened. Reads as a glowing accent on black and clears * WCAG AA large-text + non-text contrast against the dark surfaces. */ --brand-on-dark: #1ED9F0; /* H186.6 S+ L+10 — kiosk primary */ --brand-on-dark-bright: #50E0F1; /* H186.6 S+ L+20 — kiosk highlight */ --brand-on-dark-glow: rgba(30, 217, 240, 0.25); --brand-on-dark-shadow: rgba(30, 217, 240, 0.40); --brand-on-dark-ink: #042424; /* ink for text/icons on a bright fill */ /* ── DERIVED: ON-LIGHT (dashboards live on #F5F5F7 / white) ─────────── * Same hue, deepened. -primary for fills/icons/large elements, * -text for any small teal TEXT (needs ≥4.5:1 on white). */ --brand-on-light: #0997A9; /* H186.6 S+ L−8 — dashboard accent */ --brand-on-light-deep: #067F8D; /* H186.6 S+ L−14 — hover / teal text*/ --brand-on-light-bg: rgba(18, 181, 201, 0.10); --brand-on-light-border:rgba(18, 181, 201, 0.30); /* ── SEMANTIC STATUS (Apple system colors — MEANING, not decoration) ── * Identical across every surface. Status = communication, so it does NOT * shift per context the way the brand accent does. */ --status-success: #34C759; --status-warn: #FF9F0A; --status-error: #FF453A; --status-info: #0A84FF; /* ══════════════════════════════════════════════════════════════════ * DASHBOARD "PAPER" TOKENS — unified back-office design system * (ADR-0028 — design-handoff port onto the existing static surfaces) * -------------------------------------------------------------------- * These tokens port the high-fidelity dashboard handoff * (state/design/dashboard-handoff/design/dash-tokens.jsx, the `T` object) * into the brand's single source of truth, ADDITIVELY. They DO NOT * replace the --brand-* / --status-* tokens above; legacy selectors in * master/, operator/, admin/, superadmin/ keep working unchanged. * * The back-office "paper" theme: warm paper surfaces, deep-navy sidebar, * Inter Tight display + JetBrains Mono numerals, semantic jade/amber/ * red/violet ramp. Operator + Location dashboards reskin against these. * * Every hex below is grounded EXACTLY in dash-tokens.jsx `T`. * * ── CANONICAL NAVY DECISION (collision resolved here) ─────────────── * dash-tokens.jsx `T.navy` = #06132B (sidebar navy). * brand.css --brand-ink = #06122B (logo wordmark ink, established * source of truth that legacy selectors already point at). * These differ by ONE digit in the green channel (13 vs 12) — a * 1/255 difference, visually identical. To keep ONE canonical navy and * avoid breaking any legacy selector bound to --brand-ink, we adopt * --brand-ink (#06122B) as THE canonical navy and alias --dash-navy to * it. The handoff's #06132B is NOT introduced as a second navy. * ════════════════════════════════════════════════════════════════════ */ /* ── Dashboard surfaces (T.bg / T.bgSunk / T.card) ── */ --dash-bg: #F4F1E9; /* paper */ --dash-bg-sunk: #ECE8DD; /* recessed panels */ --dash-card: #FFFFFF; /* ── Dashboard ink ramp (T.ink / inkSoft / inkMute / hair / hairSoft) ── */ --dash-ink: #0A1E3F; --dash-ink-soft: #3B4C70; --dash-ink-mute: #596987; /* AA fix: was #8190AC (2.6–3.2:1 — failed normal * text on paper/card/sunk). Deepened at the same * slate hue to ≥4.5:1 on paper(4.9)/card(5.5)/ * sunk(4.5). Used only on light surfaces (labels, * eyebrows, timestamps, table heads, .muted). */ --dash-hair: rgba(10, 30, 63, .09); --dash-hair-soft: rgba(10, 30, 63, .05); /* ── Dashboard navy / sidebar (canonical navy = --brand-ink; see note) ── * T.navy (#06132B) folds into the canonical --brand-ink (#06122B). * T.navy2 (#0A1E3F) == --dash-ink, exposed as --dash-navy-2 for sidebar * gradients / lifted-navy headers. */ --dash-navy: var(--brand-ink); /* #06122B — the one canonical navy */ --dash-navy-2: #0A1E3F; /* T.navy2 — lifted navy */ /* ── Dashboard teal (text-safe) (T.teal / teal2 / tealSoft) ── * NOTE: this is the HANDOFF's teal (#0E7C8B), a slightly greener, * darker text-safe teal than the logo-derived --brand-on-light (#0997A9). * Kept as a distinct dashboard token so the handoff renders faithfully; * surfaces that want strict logo-brand teal still use --brand-on-light. */ --dash-teal: #0D727F; /* text-safe teal — AA fix: was #0E7C8B (4.0–4.4:1 * on paper/sunk, just under 4.5). Nudged 2L deeper * at the same hue → ≥4.5:1 on paper(5.0)/card(5.6)/ * sunk(4.6); also lifts white-on-teal (CTA/dot). */ --dash-teal-2: #5BD0DE; /* glow / chart (decorative; not text on light) */ --dash-teal-soft: rgba(14, 124, 139, .10); /* ── Dashboard semantic ramp (T.jade/amber/red/violet + *Soft) ── * The bright fill hexes are grounded in dash-tokens.jsx `T` and stay as the * FILL values (meters, dots, progression nodes, icons) where they're vivid * and only need ≥3:1 non-text contrast. They are intrinsically too light to * pass AA as small TEXT on their soft tints, so each carries a deepened * `-text` sibling (same hue, ≥4.5:1 on white/paper) used ONLY for pill/chip/ * delta TEXT in dash-kit.css. Violet already clears AA as text, so it has no * separate -text token. (DESIGN.md §5) */ --dash-jade: #1FAE6E; /* money / up / verified — FILL */ --dash-jade-text: #167C4F; /* AA text on jade-soft/card (5.2:1) */ --dash-jade-soft: rgba(31, 174, 110, .12); --dash-amber: #E0922B; /* attention / pending — FILL */ --dash-amber-text: #996116; /* AA text on amber-soft/card (5.2:1) */ --dash-amber-soft: rgba(224, 146, 43, .13); --dash-red: #D33A2C; /* down / offline — FILL */ --dash-red-text: #C8372A; /* AA text on red-soft/card (5.2:1) */ --dash-red-soft: rgba(211, 58, 44, .10); --dash-violet: #6E5BD0; /* AXES / god accent (AA as text: 5.2:1 card) */ --dash-violet-soft: rgba(110, 91, 208, .12); /* ── Dashboard fonts (Inter Tight display, JetBrains Mono numbers/labels) ── * Body falls back to the SF Pro UI stack (FB in dash-tokens.jsx). */ --dash-font-display: 'Inter Tight', -apple-system, 'SF Pro Display', system-ui, sans-serif; /* FT */ --dash-font-body: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif; /* FB */ --dash-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* FM */ /* ── Dashboard radii (T: cards 18, buttons 12, pills 999, tiles 10–14) ── */ --dash-r-tile: 12px; /* small tiles 10–14 */ --dash-r-btn: 12px; --dash-r-card: 18px; --dash-r-pill: 999px; /* ── Dashboard shadows (T: card shadow + hover lift) ── */ --dash-shadow-card: 0 1px 2px rgba(10, 30, 63, .04); --dash-shadow-lift: 0 14px 32px rgba(10, 30, 63, .10); /* ── Dashboard type scale (px, from handoff "Type scale") ── */ --dash-fs-h1: 28px; /* page H1 (mobile 24) */ --dash-fs-h1-m: 24px; --dash-fs-section: 19px; /* section title */ --dash-fs-kpi: 30px; /* KPI value (auto-shrinks 27/23 for long values) */ --dash-fs-kpi-27: 27px; --dash-fs-kpi-23: 23px; --dash-fs-body: 14px; /* body 13–14.5 */ --dash-fs-body-sm: 13px; --dash-fs-eyebrow: 11px; /* eyebrow / mono labels 10–11.5 */ /* ══════════════════════════════════════════════════════════════════ * SPACING SCALE — 4px base grid (the one canonical rhythm) * -------------------------------------------------------------------- * Every surface aligns padding/margin/gap to this scale instead of * ad-hoc pixels. Named by step so intent is legible. Apple uses an * 8pt grid with 4pt half-steps; we mirror that. (DESIGN.md §7) * ════════════════════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ══════════════════════════════════════════════════════════════════ * MOTION TOKENS — one easing curve + a small duration ramp * -------------------------------------------------------------------- * The shell already uses cubic-bezier(.4,0,.2,1) (Material/Apple-ish * standard ease). Name it once so transitions stay consistent and a * single prefers-reduced-motion rule (see dash-kit.css) can govern all. * ════════════════════════════════════════════════════════════════════ */ --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; /* ── Focus ring (a11y) — one visible keyboard-focus treatment ──────── */ --focus-ring: 0 0 0 3px var(--dash-teal-soft); --focus-ring-outline: 2px solid var(--dash-teal); } /* ── Dashboard font face import ──────────────────────────────────────── * Inter Tight (display) + JetBrains Mono (numbers/labels/IDs/eyebrows). * Imported once here so any back-office surface that links brand.css picks * up the handoff type system without a per-page . Pages that don't * use --dash-font-* are unaffected (fonts only load when referenced). */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ══════════════════════════════════════════════════════════════════════ * GLOBAL REDUCED-MOTION FLOOR (a11y — WCAG 2.3.3 Animation from Interactions) * ---------------------------------------------------------------------- * brand.css is linked by every back-office + consumer surface, so this one * rule gives ALL of them a reduced-motion guarantee even if a page ships an * inline transition/animation that the per-component rules (dash-kit.css, * op-paper.css, player.html, kiosk tokens.css) don't cover. * * We collapse durations to ~0 instead of `none` so JS that waits on * `transitionend` / `animationend` still fires (no logic breaks); the user * just sees no perceptible motion. iteration-count:1 stops infinite loops * (spinners, shimmer, pulse). scroll-behavior:auto kills smooth-scroll jumps. * ════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }