/** * VesselFront Design System — CSS Custom Properties * ══════════════════════════════════════════════════════════════════ * * One file of truth. Layered: * 1. PRIMITIVES raw values — colour, space, radius, type, * elevation, motion, opacity. Brand-level. * 2. CORE SEMANTIC dark-mode colour intent (surface, text, * border, icon, button). Shared across all * contexts. * 3. SCALE CONTEXT typography/space/radius aliases per * context — "app" for the bridge dashboard, * "web" for the marketing site. * * Usage: * ← bridge / app * ← marketing site * * Default (no attrs) = dark + app. * * Source: VFA.Dashboard Figma (6KmeNdstdghE6dIDaPXzUM) * Palette C — Deep Ocean · Maritime Teal success * * DO NOT EDIT MANUALLY — regenerate via `npm run build:tokens` * ══════════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════════ TIER 1 — PRIMITIVES Raw values, context-agnostic. Never reference directly in feature code — always go via semantic/scale tokens. ════════════════════════════════════════════════════════════════ */ /* ── Grey / Neutral (Palette C — 218–222°) ─── */ --color-grey-950: #020A14; --color-grey-900: #071525; --color-grey-800: #0A1E35; --color-grey-750: #0F2848; --color-grey-700: #153258; --color-grey-600: #2A4F72; --color-grey-500: #456E92; --color-grey-400: #6A96B5; --color-grey-300: #92BACE; --color-grey-200: #BAD6E4; --color-grey-100: #D4EAF5; --color-grey-50: #EAF6FD; --color-grey-a4: #0A1E350A; --color-grey-a8: #0A1E3514; --color-grey-a16: #0A1E3529; --color-grey-a24: #0A1E353D; --color-grey-a48: #0A1E357A; --color-grey-a64: #0A1E35A3; --color-grey-a72: #0A1E35B8; --color-grey-a80: #0A1E35CC; --color-grey-a96: #0A1E35F5; /* ── Blue (217° — info, actions) ─────────── */ --color-blue-900: #001633; --color-blue-800: #002B66; --color-blue-700: #004199; --color-blue-600: #0056CC; --color-blue-500: #006CFF; --color-blue-400: #3389FF; --color-blue-300: #66A7FF; --color-blue-200: #99C4FF; --color-blue-100: #CCE2FF; --color-blue-50: #E8F1FE; --color-blue-a4: #006CFF0A; --color-blue-a8: #006CFF14; --color-blue-a16: #006CFF29; --color-blue-a24: #006CFF3D; --color-blue-a48: #006CFF7A; --color-blue-a64: #006CFFA3; --color-blue-a72: #006CFFB8; --color-blue-a80: #006CFFCC; --color-blue-a96: #006CFFF5; /* ── Maritime Teal (160° — success) ──────── */ --color-teal-900: #00221A; --color-teal-800: #004535; --color-teal-700: #006850; --color-teal-600: #008B6B; --color-teal-500: #00AD86; --color-teal-400: #00C99D; --color-teal-300: #33D9B0; --color-teal-200: #80E8CE; --color-teal-100: #BFEDDE; --color-teal-50: #E5FAF5; --color-teal-a4: #00AD860A; --color-teal-a8: #00AD8614; --color-teal-a16: #00AD8629; --color-teal-a24: #00AD863D; --color-teal-a48: #00AD867A; --color-teal-a64: #00AD86A3; --color-teal-a72: #00AD86B8; --color-teal-a80: #00AD86CC; --color-teal-a96: #00AD86F5; /* ── Yellow (50° — brand) ────────────────── */ --color-yellow-900: #332C01; --color-yellow-800: #665801; --color-yellow-700: #998302; --color-yellow-600: #CCAF02; --color-yellow-500: #FFDB03; --color-yellow-400: #FFE235; --color-yellow-300: #FFE968; --color-yellow-200: #FFF19A; --color-yellow-100: #FFF8CD; --color-yellow-50: #FFFCEB; /* ── Orange (22° — warning) ──────────────── */ --color-orange-700: #99582F; --color-orange-600: #CC763F; --color-orange-500: #FF934F; --color-orange-400: #FFA972; --color-orange-300: #FFBE95; --color-orange-200: #FFD4B9; --color-orange-50: #FFF2EB; --color-orange-a16: #FF934F29; --color-orange-a48: #FF934F7A; /* ── Red (0° — error) ────────────────────── */ --color-red-700: #993232; --color-red-600: #CC4343; --color-red-500: #FF5454; --color-red-400: #FF7676; --color-red-300: #FF9898; --color-red-200: #FFBBBB; --color-red-50: #FFEBEB; --color-red-a16: #FF545429; --color-red-a24: #FF54543D; --color-red-a48: #FF54547A; /* ── Purple (263° — secondary) ───────────── */ --color-purple-600: #6E3CCC; --color-purple-500: #8A4BFF; --color-purple-400: #A16FFF; --color-purple-300: #B993FF; --color-purple-200: #D0B7FF; --color-purple-50: #F2EBFF; --color-purple-a8: #8A4BFF14; --color-purple-a16: #8A4BFF29; --color-purple-a24: #8A4BFF3D; --color-purple-a48: #8A4BFF7A; /* ── White alphas ────────────────────────── */ --color-white: #FFFFFF; --color-white-a4: #FFFFFF0A; --color-white-a8: #FFFFFF14; --color-white-a16: #FFFFFF29; --color-white-a24: #FFFFFF3D; --color-white-a45: rgba(255, 255, 255, 0.45); --color-white-a48: #FFFFFF7A; --color-white-a64: #FFFFFFA3; --color-white-a72: #FFFFFFB8; --color-white-a80: #FFFFFFCC; /* ── Spacing primitives ──────────────────── */ --space-0: 0px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-112: 112px; --space-128: 128px; --space-160: 160px; --space-192: 192px; --space-224: 224px; --space-256: 256px; /* ── Radius primitives ───────────────────── */ --radius-0: 0px; --radius-2: 2px; --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-24: 24px; --radius-32: 32px; --radius-full: 9999px; /* ── Typography primitives ───────────────── */ --font-family-primary: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-family-display: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-10: 10px; --font-size-11: 11px; --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-size-18: 18px; --font-size-20: 20px; --font-size-24: 24px; --font-size-28: 28px; --font-size-32: 32px; --font-size-40: 40px; --font-size-48: 48px; --font-size-56: 56px; --font-size-64: 64px; --font-size-72: 72px; --font-size-80: 80px; --font-size-96: 96px; --font-size-128: 128px; --line-height-16: 16px; --line-height-20: 20px; --line-height-24: 24px; --line-height-28: 28px; --line-height-32: 32px; --line-height-36: 36px; --line-height-40: 40px; --line-height-48: 48px; --line-height-56: 56px; --line-height-64: 64px; --line-height-72: 72px; --line-height-80: 80px; --line-height-96: 96px; --line-height-112: 112px; --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-snug: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-widest: 0.08em; /* ── Elevation primitives ────────────────── */ --elevation-0: none; --elevation-100: 0 2px 4px -1px rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.05), 0 4px 8px -4px rgba(0,0,0,0.05); --elevation-200: 0 2px 4px 0 rgba(15,23,42,0.05), 0 6px 10px -5px rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.05); --elevation-300: 0 8px 12px 0 rgba(0,0,0,0.10), 0 1px 8px 8px rgba(0,0,0,0.04), 0 3px 5px 0 rgba(0,0,0,0.12); --elevation-400: 0 16px 24px 0 rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.08), 0 8px 10px -5px rgba(0,0,0,0.20); --elevation-500: 0 24px 48px 0 rgba(0,0,0,0.24), 0 10px 40px 8px rgba(0,0,0,0.12), 0 12px 16px -8px rgba(0,0,0,0.28); /* ── Motion primitives ───────────────────── */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 500ms; --duration-slowest: 800ms; --easing-linear: cubic-bezier(0, 0, 1, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --easing-emphasis: cubic-bezier(0.2, 0, 0, 1); /* ── Opacity primitives + semantics ──────── */ --opacity-0: 0; --opacity-4: 0.04; --opacity-8: 0.08; --opacity-12: 0.12; --opacity-16: 0.16; --opacity-24: 0.24; --opacity-32: 0.32; --opacity-48: 0.48; --opacity-64: 0.64; --opacity-72: 0.72; --opacity-80: 0.80; --opacity-96: 0.96; --opacity-100: 1; --opacity-disabled: 0.5; --opacity-muted: 0.72; --opacity-overlay: 0.64; --opacity-hover: 0.08; --opacity-pressed: 0.12; } /* ════════════════════════════════════════════════════════════════ TIER 2 — CORE SEMANTIC (DARK) Colour intent — shared across every scale context. Activated by [data-theme="dark"], also the :root default. ════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* ── Surface ─────────────────────────────── */ --color-surface-sunken: var(--color-grey-950); --color-surface-base: var(--color-grey-900); --color-surface-raised: var(--color-grey-800); --color-surface-overlay: var(--color-grey-750); --color-surface-modal: var(--color-grey-700); --color-surface-inverse: var(--color-grey-50); --color-surface-blur: var(--color-grey-a80); --color-surface-info: var(--color-blue-a16); --color-surface-info-light: var(--color-blue-a8); --color-surface-info-lighter: var(--color-blue-a4); --color-surface-success: var(--color-teal-500); --color-surface-success-light: var(--color-teal-200); --color-surface-success-lighter: var(--color-teal-50); --color-surface-warning: var(--color-orange-500); --color-surface-warning-light: var(--color-orange-200); --color-surface-warning-lighter: var(--color-orange-50); --color-surface-error: var(--color-red-500); --color-surface-error-light: var(--color-red-200); --color-surface-error-lighter: var(--color-red-50); --color-surface-attention: var(--color-yellow-500); --color-surface-attention-light: var(--color-yellow-200); --color-surface-attention-lighter: var(--color-yellow-50); --color-surface-secondary: var(--color-purple-500); --color-surface-secondary-light: var(--color-purple-a24); --color-surface-secondary-lighter: var(--color-purple-a8); /* ── Text ────────────────────────────────── */ --color-text-primary: #FFFFFF; --color-text-secondary: var(--color-white-a72); --color-text-tertiary: var(--color-white-a45); --color-text-inverse: var(--color-grey-950); --color-text-disabled: var(--color-grey-400); --color-text-link: var(--color-blue-500); --color-text-link-light: var(--color-blue-300); --color-text-link-secondary: var(--color-purple-300); --color-text-success: var(--color-teal-500); --color-text-success-secondary: var(--color-teal-600); --color-text-error: var(--color-red-500); --color-text-error-secondary: var(--color-red-600); --color-text-warning: var(--color-orange-700); --color-text-attention: #998302; --color-text-attention-secondary: #CCAF02; /* ── Border ──────────────────────────────── */ --color-border-primary: var(--color-white-a16); --color-border-primary-light: var(--color-white-a8); --color-border-primary-lighter: var(--color-white-a4); --color-border-inverse: var(--color-grey-900); --color-border-info: var(--color-blue-500); --color-border-info-light: var(--color-blue-a48); --color-border-info-lighter: var(--color-blue-a16); --color-border-success: var(--color-teal-400); --color-border-success-light: var(--color-teal-a48); --color-border-error: var(--color-red-600); --color-border-error-light: var(--color-red-a48); --color-border-warning: var(--color-orange-500); --color-border-warning-light: var(--color-orange-a48); --color-border-secondary: var(--color-purple-500); --color-border-secondary-light: var(--color-purple-a48); --color-border-secondary-lighter: var(--color-purple-a8); /* ── Icon ────────────────────────────────── */ --color-icon-primary: var(--color-white-a72); --color-icon-primary-light: var(--color-white-a45); --color-icon-primary-lighter: var(--color-white-a24); --color-icon-info: var(--color-blue-400); --color-icon-info-light: var(--color-blue-300); --color-icon-info-lighter: var(--color-blue-100); --color-icon-success: var(--color-teal-500); --color-icon-success-light: var(--color-teal-300); --color-icon-success-lighter: var(--color-teal-50); --color-icon-success-dark: var(--color-teal-600); --color-icon-error: var(--color-red-500); --color-icon-error-light: var(--color-red-300); --color-icon-error-lighter: var(--color-red-50); --color-icon-warning: var(--color-orange-500); --color-icon-warning-light: var(--color-orange-300); --color-icon-warning-lighter: var(--color-orange-200); --color-icon-attention: var(--color-yellow-500); --color-icon-attention-light: var(--color-yellow-400); --color-icon-attention-lighter: var(--color-yellow-50); --color-icon-secondary: var(--color-purple-500); --color-icon-secondary-light: var(--color-purple-300); --color-icon-secondary-lighter: var(--color-purple-200); /* ── Button ──────────────────────────────── */ --color-button-primary: var(--color-blue-500); --color-button-primary-hover: var(--color-blue-400); --color-button-primary-accent: var(--color-blue-600); --color-button-primary-soft: var(--color-blue-50); --color-button-text: var(--color-white); --color-button-secondary: var(--color-blue-a24); --color-button-secondary-hover: var(--color-blue-a48); --color-button-neutral: var(--color-grey-750); --color-button-neutral-hover: var(--color-grey-800); --color-button-success: var(--color-teal-700); --color-button-success-hover: var(--color-teal-600); --color-button-error: var(--color-red-a16); --color-button-error-hover: var(--color-red-a24); } /* ════════════════════════════════════════════════════════════════ TIER 3 — SCALE CONTEXT: APP (default) Dense, information-rich. Used on the bridge dashboard. Activated by :root default or [data-scale="app"]. ════════════════════════════════════════════════════════════════ */ :root, [data-scale="app"] { /* ── Typography ──────────────────────────── */ --type-display-family: var(--font-family-primary); --type-display-size: var(--font-size-32); --type-display-line-height: var(--line-height-40); --type-display-weight: var(--font-weight-semibold); --type-display-tracking: var(--letter-spacing-snug); --type-h1-family: var(--font-family-primary); --type-h1-size: var(--font-size-28); --type-h1-line-height: var(--line-height-36); --type-h1-weight: var(--font-weight-semibold); --type-h1-tracking: var(--letter-spacing-snug); --type-h2-family: var(--font-family-primary); --type-h2-size: var(--font-size-24); --type-h2-line-height: var(--line-height-32); --type-h2-weight: var(--font-weight-semibold); --type-h3-family: var(--font-family-primary); --type-h3-size: var(--font-size-20); --type-h3-line-height: var(--line-height-28); --type-h3-weight: var(--font-weight-semibold); --type-h4-family: var(--font-family-primary); --type-h4-size: var(--font-size-18); --type-h4-line-height: var(--line-height-28); --type-h4-weight: var(--font-weight-semibold); --type-body-lg-family: var(--font-family-primary); --type-body-lg-size: var(--font-size-18); --type-body-lg-line-height: var(--line-height-28); --type-body-lg-weight: var(--font-weight-regular); --type-body-md-family: var(--font-family-primary); --type-body-md-size: var(--font-size-16); --type-body-md-line-height: var(--line-height-24); --type-body-md-weight: var(--font-weight-regular); --type-body-rg-family: var(--font-family-primary); --type-body-rg-size: var(--font-size-14); --type-body-rg-line-height: var(--line-height-20); --type-body-rg-weight: var(--font-weight-regular); --type-caption-family: var(--font-family-primary); --type-caption-size: var(--font-size-12); --type-caption-line-height: var(--line-height-16); --type-caption-weight: var(--font-weight-medium); --type-caption-tracking: var(--letter-spacing-wide); --type-overline-family: var(--font-family-primary); --type-overline-size: var(--font-size-11); --type-overline-line-height: var(--line-height-16); --type-overline-weight: var(--font-weight-semibold); --type-overline-tracking: var(--letter-spacing-widest); --type-mono-family: var(--font-family-mono); --type-mono-size: var(--font-size-14); --type-mono-line-height: var(--line-height-20); --type-mono-weight: var(--font-weight-regular); /* ── Space (T-shirt) ─────────────────────── */ --space-none: var(--space-0); --space-xs: var(--space-4); --space-sm: var(--space-8); --space-md: var(--space-12); --space-lg: var(--space-16); --space-xl: var(--space-24); --space-2xl: var(--space-32); --space-3xl: var(--space-48); --space-4xl: var(--space-64); /* ── Radius (T-shirt) ────────────────────── */ --radius-none: var(--radius-0); --radius-xs: var(--radius-4); --radius-sm: var(--radius-8); --radius-md: var(--radius-12); --radius-lg: var(--radius-16); /* ── Sizing (control heights) ────────────── */ --control-sm: 30px; --control-md: 36px; --control-lg: 44px; } /* ════════════════════════════════════════════════════════════════ TIER 3 — SCALE CONTEXT: WEB Expressive, brand-forward. Marketing site. Activated by [data-scale="web"]. ════════════════════════════════════════════════════════════════ */ [data-scale="web"] { /* ── Typography ──────────────────────────── */ --type-display-family: var(--font-family-display); --type-display-size: var(--font-size-96); --type-display-line-height: var(--line-height-96); --type-display-weight: var(--font-weight-bold); --type-display-tracking: var(--letter-spacing-tight); --type-h1-family: var(--font-family-display); --type-h1-size: var(--font-size-72); --type-h1-line-height: var(--line-height-80); --type-h1-weight: var(--font-weight-bold); --type-h1-tracking: var(--letter-spacing-tight); --type-h2-family: var(--font-family-display); --type-h2-size: var(--font-size-56); --type-h2-line-height: var(--line-height-64); --type-h2-weight: var(--font-weight-bold); --type-h2-tracking: var(--letter-spacing-tight); --type-h3-family: var(--font-family-display); --type-h3-size: var(--font-size-40); --type-h3-line-height: var(--line-height-48); --type-h3-weight: var(--font-weight-semibold); --type-h3-tracking: var(--letter-spacing-snug); --type-h4-family: var(--font-family-primary); --type-h4-size: var(--font-size-32); --type-h4-line-height: var(--line-height-40); --type-h4-weight: var(--font-weight-semibold); --type-h4-tracking: var(--letter-spacing-snug); --type-h5-family: var(--font-family-primary); --type-h5-size: var(--font-size-24); --type-h5-line-height: var(--line-height-32); --type-h5-weight: var(--font-weight-semibold); --type-h6-family: var(--font-family-primary); --type-h6-size: var(--font-size-20); --type-h6-line-height: var(--line-height-28); --type-h6-weight: var(--font-weight-semibold); --type-lead-family: var(--font-family-primary); --type-lead-size: var(--font-size-24); --type-lead-line-height: var(--line-height-36); --type-lead-weight: var(--font-weight-regular); --type-body-lg-family: var(--font-family-primary); --type-body-lg-size: var(--font-size-20); --type-body-lg-line-height: var(--line-height-32); --type-body-lg-weight: var(--font-weight-regular); --type-body-md-family: var(--font-family-primary); --type-body-md-size: var(--font-size-18); --type-body-md-line-height: var(--line-height-28); --type-body-md-weight: var(--font-weight-regular); --type-body-rg-family: var(--font-family-primary); --type-body-rg-size: var(--font-size-16); --type-body-rg-line-height: var(--line-height-24); --type-body-rg-weight: var(--font-weight-regular); --type-caption-family: var(--font-family-primary); --type-caption-size: var(--font-size-14); --type-caption-line-height: var(--line-height-20); --type-caption-weight: var(--font-weight-medium); --type-overline-family: var(--font-family-primary); --type-overline-size: var(--font-size-12); --type-overline-line-height: var(--line-height-16); --type-overline-weight: var(--font-weight-semibold); --type-overline-tracking: var(--letter-spacing-widest); --type-mono-family: var(--font-family-mono); --type-mono-size: var(--font-size-16); --type-mono-line-height: var(--line-height-24); --type-mono-weight: var(--font-weight-regular); /* ── Space (T-shirt) — airier ────────────── */ --space-none: var(--space-0); --space-xs: var(--space-8); --space-sm: var(--space-16); --space-md: var(--space-24); --space-lg: var(--space-32); --space-xl: var(--space-48); --space-2xl: var(--space-64); --space-3xl: var(--space-96); --space-4xl: var(--space-128); --space-5xl: var(--space-192); --space-6xl: var(--space-256); /* ── Radius (T-shirt) — bolder ───────────── */ --radius-none: var(--radius-0); --radius-xs: var(--radius-8); --radius-sm: var(--radius-12); --radius-md: var(--radius-16); --radius-lg: var(--radius-24); --radius-xl: var(--radius-32); /* ── Sizing (control heights) — chunkier ─── */ --control-sm: 40px; --control-md: 48px; --control-lg: 56px; --control-xl: 64px; /* ── Container widths ────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-prose: 72ch; /* ── Breakpoints (for reference) ─────────── */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; }