/* * tokens.css — DiveOS design token foundation (v4 — repo spec: sky-700 + Inter) * * v4 migration (2026-06-06): aligned to the diveOS-design-system repo * (gitlab.nsfrg.my:novas/diveOS-design-system), now the locked design * source of truth. * - Body font: Inter (was Geist Sans) * - Accent: sky-700 #0369A1 (earlier exploration) * - Neutrals: cool gray ramp aliases (earlier exploration) * - Status palette: ramp-based soft tints (--{status} / -bg / -border), * 5 repo statuses + 2 app-derived (returning=slate, completed=gray) * - Dark mode removed entirely — DiveOS is light-only per the repo spec * * Foundation ramps (gray/sky/amber/green/red/slate/rose/stone) stay loaded: * they are the source for semantic aliases, status tints, and the * /admin/design_system ramp swatches. * * Loaded via application.css before all other stylesheets. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root { /* ─── Foundation ramps (semantic source + showcase swatches) ─────── */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --gray-950: #030712; --sky-50: #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD; --sky-300: #7DD3FC; --sky-400: #38BDF8; --sky-500: #0EA5E9; --sky-600: #0284C7; --sky-700: #0369A1; --sky-800: #075985; --sky-900: #0C4A6E; --sky-950: #082F49; --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A; --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E; --amber-900: #78350F; --amber-950: #451A03; --green-50: #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0; --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E; --green-600: #16A34A; --green-700: #15803D; --green-800: #166534; --green-900: #14532D; --green-950: #052E16; --red-50: #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA; --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --red-800: #991B1B; --red-900: #7F1D1D; --red-950: #450A0A; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --slate-950: #020617; --rose-50: #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #F43F5E; --rose-600: #E11D48; --rose-700: #BE123C; --rose-800: #9F1239; --rose-900: #881337; --rose-950: #4C0519; --stone-50: #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4; --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C; --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524; --stone-900: #1C1917; --stone-950: #0C0A09; /* ─── Typography ────────────────────────────────────────────────────── Single typeface for UI: Inter for BOTH display/headings and body (General Sans was dropped — headings + body are now one family). Geist Mono for tabular numerals, IDs, timestamps, financial figures. --font-display is kept as a distinct token (same value as --font-sans) so heading call-sites keep their semantic name and can diverge later without a sweep. */ --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* ─── Semantic neutrals (v4 — cool gray ramp aliases) ──────────────── */ --canvas: var(--gray-50); /* page bg */ --surface: #FFFFFF; /* cards, modals */ --surface-alt: var(--gray-100); /* header zone, sidebar, subtle distinction */ --hairline: var(--gray-200); /* default border */ --hairline-2: #F0F1F4; /* inner row separator */ --hairline-strong: var(--gray-300); /* active/focused border */ --ink: var(--gray-900); /* body + headings */ --muted: var(--gray-500); /* less prominent text */ --muted-2: var(--gray-400); /* captions, meta */ /* ─── Accent (v4 — sky-700, swappable per tenant) ─────────────────── */ --accent: var(--sky-700); --accent-strong: var(--sky-800); --accent-soft: rgba(3, 105, 161, 0.08); --accent-softer: rgba(3, 105, 161, 0.04); --accent-border: rgba(3, 105, 161, 0.26); /* ─── v1/v2 compat aliases — back-compat for existing callsites ───── */ --bg: var(--canvas); --text-primary: var(--ink); --text-secondary: var(--gray-700); --text-muted: var(--muted); --border: var(--hairline); --border-strong: var(--hairline-strong); --accent-tint: var(--accent-soft); --accent-light: var(--sky-100); /* lit accent tint for current-step */ --sidebar-bg: var(--gray-100); --hover-warm: var(--gray-100); /* legacy name; now neutral gray hover */ /* ─── Status palette — single source (v4 ramp-based soft tints) ───── Both legacy names (--status-*-fg / --status-*-bg) and v2 short names (--, ---bg, ---border) resolve to the SAME ramp values so no chip can drift between aliases. 5 repo statuses + 2 app-derived (returning=slate, completed=gray). */ --status-pending-fg: var(--stone-600); --status-pending-bg: var(--stone-100); --status-pending-border:var(--stone-300); --pending: var(--status-pending-fg); --pending-bg: var(--status-pending-bg); --pending-border: var(--status-pending-border); --status-confirmed-fg: var(--green-700); --status-confirmed-bg: var(--green-50); --status-confirmed-border: var(--green-200); --confirmed: var(--status-confirmed-fg); --confirmed-bg: var(--status-confirmed-bg); --confirmed-border: var(--status-confirmed-border); --status-briefing-fg: var(--amber-800); --status-briefing-bg: var(--amber-50); --status-briefing-border: var(--amber-300); --briefing: var(--status-briefing-fg); --briefing-bg: var(--status-briefing-bg); --briefing-border: var(--status-briefing-border); --status-in-water-fg: var(--sky-800); --status-in-water-bg: var(--sky-50); --status-in-water-border: var(--sky-200); --inwater: var(--status-in-water-fg); --inwater-bg: var(--status-in-water-bg); --inwater-border: var(--status-in-water-border); --status-returning-fg: var(--slate-600); --status-returning-bg: var(--slate-100); --status-returning-border: var(--slate-300); --status-completed-fg: var(--gray-500); --status-completed-bg: var(--gray-100); --status-completed-border: var(--gray-300); --status-cancelled-fg: var(--rose-800); --status-cancelled-bg: var(--rose-50); --status-cancelled-border: var(--rose-200); --cancelled: var(--status-cancelled-fg); --cancelled-bg: var(--status-cancelled-bg); --cancelled-border: var(--status-cancelled-border); /* ─── Bar / rail tints (peripheral indicators — lighter ramp steps) ── */ --bar-confirmed: var(--green-300); --bar-briefing: var(--amber-300); --bar-inwater: var(--sky-300); --bar-pending: var(--stone-300); --bar-cancelled: var(--rose-300); --bar-returning: var(--slate-300); /* ─── Input tokens (v4 repo model) ─────────────────────────────────── */ --input-bg: var(--gray-50); --input-border: var(--gray-300); --input-border-hover: var(--gray-400); --input-border-focus: rgba(3, 105, 161, 0.60); --input-placeholder: rgba(107, 114, 128, 0.50); --focus-ring: rgba(3, 105, 161, 0.10); --error: #C13028; /* ─── Notification semantics (toasts / inline alerts) ─────────────── Generic success/danger/warning/info layer, distinct from the booking-status palette. Resolves to existing colour ramps. */ --success: var(--green-700); --success-bg: var(--green-50); --success-border: var(--green-200); --danger: var(--rose-800); --danger-bg: var(--rose-50); --danger-border: var(--rose-200); --warning: var(--amber-700); --warning-bg: var(--amber-50); --warning-border: var(--amber-200); --info: var(--accent); --info-bg: var(--sky-50); --info-border: var(--sky-200); /* ─── Spacing scale — 8-point system (4px sub-grid) ────────────────── One unit = 4px. Use these for all component padding / gap / margin so primitives stay on the grid. Half-step (--space-0-5 = 2px) is reserved for hairline-level nudges only (icon optical alignment), not layout. */ --space-0-5: 2px; --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; /* ─── Type scale — even steps on the system (no odd/half sizes) ─────── Component font-size MUST use these tokens, never a raw px. The old 11/12.5/13/13.5/15px values snap to the nearest step. Bigger one-off display/hero sizes (>28) stay raw — they're not primitives. */ --text-2xs: 10px; /* micro labels, table th eyebrows */ --text-xs: 12px; /* eyebrows, sub-lines, meta, chips (← 11/11.5/12.5) */ --text-sm: 14px; /* body / primary cell / card heading (← 13/13.5/15) */ --text-md: 16px; /* prominent body, small headings (← 15.5/17) */ --text-lg: 18px; /* card/section headings (← 19) */ --text-xl: 20px; /* large headings (← 21/22) */ --text-2xl: 24px; /* (← 23/25/26) */ --text-3xl: 28px; /* page titles (← 27/30/31/32) */ /* ─── Border radius scale ────────────────────────────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 9999px; /* ─── Shadow scale ───────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --shadow-md: 0 4px 8px rgba(17, 24, 39, 0.10); --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px var(--hairline); --shadow-hover: 0 2px 8px rgba(17, 24, 39, 0.06), 0 0 0 1px var(--hairline); --shadow-panel: 0 24px 60px -20px rgba(17, 24, 39, 0.20), 0 8px 24px -12px rgba(17, 24, 39, 0.10); /* ─── Z-index stack ──────────────────────────────────────────────── */ --z-toast: 60; --z-modal: 50; --z-panel: 40; --z-dropdown: 30; --z-tooltip: 20; /* ─── Material Symbols defaults (legacy) ─────────────────────────── */ --ms-default-size: 20px; --ms-default-weight: 300; /* ─── Motion ─────────────────────────────────────────────────────── */ --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms; --t-med: 180ms; --t-slow: 240ms; /* ─── Interaction states ───────────────────────────────────────────── Canonical state vocabulary every interactive primitive uses: hover → neutral darken overlay (or accent-strong on filled) active → stronger overlay / translateY(1px) press focus → --shadow-focus keyboard ring (focus-visible only) selected → accent-soft fill + accent text disabled → --disabled-opacity, no pointer events See /admin/design_system "Interaction states" for the recipe. */ --state-hover: rgba(17, 24, 39, 0.04); --state-active: rgba(17, 24, 39, 0.08); --state-selected: var(--accent-soft); --focus-ring-color: rgba(3, 105, 161, 0.35); --shadow-focus: 0 0 0 3px var(--focus-ring-color); --disabled-opacity: 0.5; --transition-base: var(--t-med) var(--ease-standard); /* ─── Layout primitives ─────────────────────────────────────────── */ --sidebar-w: 240px; --panel-w: 520px; }