/* * OnDeck design tokens — single source of truth for palette, typography, * spacing, radii, shadows, and motion. * * Every token pair intended for text/UI has been contrast-audited against * WCAG 2.2 AA (see docs/wcag-contrast-audit.md). Notes inline on tokens * that have narrow allowed uses. * * Consumed by: * - Tailwind v4 via @theme in base.css (utility classes like `bg-navy`) * - Marketing's static HTML via `@import` or * - Components that need raw CSS custom properties */ :root { /* ── Brand spine ──────────────────────────────────────────────────── */ --color-navy: #0e2240; /* 16.5:1 on white — AAA; primary spine */ --color-deep: #24527f; /* 8.0:1 on white — AAA; lighter than */ /* navy so the two read as distinct steps.*/ --color-water: #114868; /* 7.6:1 on white — AAA (links) */ --color-aqua: #00b8c4; /* 2.6:1 — decorative/accent ONLY */ --color-aqua-hover: #00cdd9; /* hover state on aqua bg; never text/wht */ --color-aqua-text: #005c62; /* 7.5:1 on white — AAA (text/link color)*/ --color-aqua-dark: #004a52; /* 9.3:1 on white — AAA; hover on aqua-text */ /* ── Surfaces ──────────────────────────────────────────────────────── */ --color-surface: #ffffff; --color-surface-alt: #f7fafc; /* subtle panel bg */ --color-surface-inset: #edf2f7; /* nested cards, table-header rows */ --color-bg: #f0f4f7; /* page background */ /* ── Borders (1.4.11: 3:1 only for functional borders) ────────────── */ --color-border-subtle: #e2e8f0; /* decorative dividers */ --color-border: #cbd5e0; /* card/table outlines */ --color-border-strong: #94a3b8; /* input/button outlines (3.0:1 on white) */ /* ── Text ─────────────────────────────────────────────────────────── */ --color-text-strong: #0e2240; /* headings */ --color-text: #2d4a66; /* 9.5:1 on white — AA body */ --color-text-body: #2d4a66; /* alias */ --color-text-muted: #3a526d; /* 7.3:1 on white — AAA body */ --color-text-faint: #5a7590; /* 4.6:1 — AAA large text only */ --color-text-on-dark:#ffffff; /* text on navy/deep/aqua-text surfaces */ /* ── Semantic (pairs: bg + text for alerts; solid for text/icon) ─── */ --color-success: #2f7d56; /* 5.3:1 on white — AA body */ --color-success-bg: #dcfce7; --color-success-fg: #14532d; /* ~10:1 on success-bg — AAA */ --color-warning: #9a6215; /* 5.3:1 on white — AA body (text color) */ --color-warning-bg: #fef3c7; --color-warning-fg: #713f12; /* ~8:1 on warning-bg */ --color-error: #9b1c1c; /* 9.0:1 on white — AAA body */ --color-error-bg: #fee2e2; --color-error-fg: #7f1d1d; /* ~8:1 on error-bg */ --color-info: #0ea5e9; /* 2.8:1 on white — decorative ONLY. */ /* Safe contexts: */ /* • icon fill on light surfaces */ /* • border on alert panels (30% opacity) */ /* • bg with navy text (5.8:1 pair) */ /* NOT safe: */ /* • bg with white text (fails 4.5:1) */ /* • text color on white */ /* For info text on white, use info-fg. */ --color-info-bg: #e0f2fe; --color-info-fg: #0c4a6e; /* ~8:1 on info-bg; also 9.5:1 on white */ /* ── Typography families ──────────────────────────────────────────── */ /* Locked in 2026-04-17 to match the finalized OnDeck Aquatics Management wordmark: Bebas Neue — display (wordmark, page titles, hero copy) Helvetica Light — body + UI; Light (300) is the default weight Instrument Serif — italic accents inside display copy */ --font-display: "Bebas Neue", system-ui, sans-serif; --font-accent: "Instrument Serif", Georgia, serif; --font-body: "Helvetica Neue", "Helvetica", "Arial", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-weight-body-default: 300; /* Helvetica Light */ /* ── Type scale (pixel values in rem-equivalent) ──────────────────── */ --text-xs: 0.75rem; /* 12px — captions, table headers */ --text-sm: 0.875rem; /* 14px — secondary UI text */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — large body, small headings */ --text-xl: 1.25rem; /* 20px — heading-sm */ --text-2xl: 1.5rem; /* 24px — heading */ --text-3xl: 1.875rem; /* 30px — heading-lg */ --text-4xl: 2.25rem; /* 36px — display-sm */ --text-5xl: 3rem; /* 48px — display-md */ --text-6xl: 4rem; /* 64px — display-lg */ --text-7xl: 5.5rem; /* 88px — display-xl (hero, Bebas Neue) */ /* ── Spacing (4px grid) ───────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Radii ────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 3px; /* pills, small buttons, inputs */ --radius: 8px; /* cards, default buttons */ --radius-lg: 12px; /* large cards, modals */ --radius-full: 9999px; /* pills, avatars */ /* ── Shadows (navy-tinted so they sit in the brand light) ─────────── */ --shadow-sm: 0 1px 2px rgba(14, 34, 64, 0.06); --shadow: 0 4px 12px rgba(14, 34, 64, 0.08); --shadow-lg: 0 12px 24px rgba(14, 34, 64, 0.10); --shadow-xl: 0 20px 48px rgba(14, 34, 64, 0.16); --shadow-focus: 0 0 0 3px rgba(0, 184, 196, 0.4); /* aqua focus ring */ /* ── Motion ───────────────────────────────────────────────────────── */ --duration-fast: 120ms; --duration: 200ms; --duration-slow: 320ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── Focus ring (WCAG 2.4.7 + 2.4.13 focus appearance) ────────────── */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-aqua); } /* Respect user preference — disable non-essential motion. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration: 0ms; --duration-slow: 0ms; } }