/* ============================================================================ LogosPilot — Design Tokens Phase 5B · Wave 1 · Implements Design Token & Semantic Foundation v1.0 + Foundational Visual System & Design Infrastructure v1.0 THREE TIERS (Design Token §A.2): Tier 1 --lp-* primitives. NEVER referenced by a component. Tier 2 --color-*, semantic roles. Components consume ONLY these. --space-*, --type-*, ... Tier 3 bound in components.css A component referencing a Tier 1 token is defective (§A.2 binding rule). ========================================================================= */ :root { /* ── TIER 1 · PRIMITIVES ───────────────────────────────────────────────── Neutral ramp GENERATED at hue 220°, saturation declining as L* rises (the measured chromatic law). Separation validated in CIE L*, not WCAG ratio — the +0.05 flare term makes contrast ratio the wrong metric for dark-surface layering. Foundational §A.1.1 */ --lp-void: #000818; /* L* 2.2 measured, fixed */ --lp-canvas: #07132A; /* L* 6.1 ΔL* 3.96 */ --lp-surface-1: #0F1C35; /* L* 10.5 ΔL* 4.35 */ --lp-surface-2: #19263F; /* L* 15.2 ΔL* 4.76 */ --lp-surface-3: #232F49; /* L* 19.5 ΔL* 4.29 */ --lp-surface-4: #2D3953; /* L* 24.0 ΔL* 4.51 */ --lp-surface-5: #37445D; /* L* 28.7 ΔL* 4.71 */ --lp-border-subtle: #26334B; /* L* 21.2 */ --lp-border-default: #384664; /* L* 29.8 */ --lp-border-strong: #586A90; /* L* 44.8 — void→surface.1 only */ --lp-border-interactive: #A7B1C4; /* L* 72.0 — 3:1 on EVERY surface */ --lp-content-disabled: #8693AE; /* L* 60.8 */ --lp-content-tertiary: #A7B1C4; /* L* 72.0 */ --lp-content-secondary: #C8CFDC; /* L* 83.0 */ --lp-content-primary: #EAECF3; /* L* 93.4 measured, fixed */ /* Brand blues. Chromatic law: R=0, S=100%, hue 200°→220° as L falls. SURFACE RESTRICTIONS ARE BINDING — Foundational §A.5: azure text-valid void → surface.4 (4.40). surface.5 = 3.73 → UI only signal text-valid void + canvas ONLY (4.33 at surface.1 — below 4.5) indigo FILL ONLY, everywhere. 2.99:1 on void — fails even 3:1 non-text */ --lp-azure: #00A8FC; /* 7.64:1 on void — AAA */ --lp-signal: #0081ED; /* 5.12:1 on void — AA */ --lp-indigo: #0052D2; /* 2.99:1 — FILL ONLY */ --lp-white: #FFFFFF; /* 20.04:1 — smallest, highest-emphasis text only */ /* Feedback. Registered Phase 5A Part A after four-condition simulation. FINDING: no four hues stay mutually distinguishable under protanopia, deuteranopia, tritanopia AND monochrome. Colour is therefore SECONDARY REINFORCEMENT — meaning is carried by icon + text. ECS §E.8. danger text-valid void → surface.2 only (3.17 at surface.4). */ --lp-danger: #E4574C; /* L* 55.9 */ --lp-warning: #F0B429; /* L* 76.9 */ --lp-success: #3FBF8F; /* L* 69.7 */ --lp-information: #C8CFDC; /* L* 83.0 — neutral, not a fifth hue */ /* Spatial anchor. PROVISIONAL pending B1 (vector master). Re-anchoring is a PATCH: every value below derives from this one token, so no component changes. Design Token §P.3 step 9. */ --lp-space-unit: 4px; /* Type scale. Hybrid: tight increments at reading sizes where the eye detects small differences; geometric above. Mirrors the spacing scale's linear-then-geometric logic. Every leading is a whole multiple of 4px so vertical rhythm holds (Design Token §C.4). */ --lp-size-96: 96px; --lp-lead-104: 104px; --lp-size-72: 72px; --lp-lead-80: 80px; --lp-size-56: 56px; --lp-lead-64: 64px; --lp-size-48: 48px; --lp-lead-56: 56px; --lp-size-40: 40px; --lp-lead-48: 48px; --lp-size-32: 32px; --lp-lead-40: 40px; --lp-size-24: 24px; --lp-lead-32: 32px; --lp-size-20: 20px; --lp-lead-28: 28px; --lp-size-18: 18px; --lp-size-16: 16px; --lp-lead-24: 24px; --lp-size-14: 14px; --lp-lead-20: 20px; --lp-size-12: 12px; --lp-lead-16: 16px; --lp-weight-regular: 400; --lp-weight-medium: 500; --lp-weight-strong: 600; --lp-weight-heavy: 700; /* ── TIER 2 · SEMANTIC ROLES ──────────────────────────────────────────── Components consume ONLY from here down. */ /* Background & surface. Background = the environment a thing sits IN. Surface = the material a thing is MADE OF. Foundational §A.6. */ --color-background-base: var(--lp-void); --color-background-raised: var(--lp-canvas); --color-background-sunken: var(--lp-void); --color-surface-default: var(--lp-surface-2); --color-surface-raised: var(--lp-surface-3); --color-surface-overlay: var(--lp-surface-4); --color-surface-tooltip: var(--lp-surface-5); --color-surface-documentation: var(--lp-surface-1); --color-surface-evidence: var(--lp-surface-2); --color-surface-code: var(--lp-surface-1); --color-surface-table: var(--lp-void); /* data sits on the field */ --color-surface-search: var(--lp-surface-3); /* Content. Minimums are part of the definition — a value failing its declared minimum CANNOT be registered. Design Token §E.5. */ --color-content-primary: var(--lp-content-primary); /* ≥7:1 AAA */ --color-content-secondary: var(--lp-content-secondary); /* ≥4.5:1 */ --color-content-tertiary: var(--lp-content-tertiary); /* ≥4.5:1 — NOT relaxed to 3:1. LogosPilot's metadata is checksums and versions: the highest- consequence text on the site. */ --color-content-disabled: var(--lp-content-disabled); /* ≥3:1 */ --color-content-on-accent: var(--lp-void); /* Interactive. azure, never signal, on elevated surfaces. */ --color-interactive-default: var(--lp-azure); --color-interactive-hover: var(--lp-white); --color-interactive-visited: var(--lp-content-secondary); /* docs only */ /* Accent. indigo is bound to exactly ONE role, defined as background-only, so there is no token that would permit its misuse. Foundational §E.6. */ --color-accent-default: var(--lp-azure); --color-accent-emphasis: var(--lp-azure); --color-accent-subtle: var(--lp-indigo); /* FILL ONLY. Never text. */ /* Feedback — always paired with text + shape-distinct icon. */ --color-feedback-danger: var(--lp-danger); --color-feedback-warning: var(--lp-warning); --color-feedback-success: var(--lp-success); --color-feedback-information: var(--lp-information); /* Borders */ --border-subtle: var(--lp-border-subtle); --border-default: var(--lp-border-default); --border-strong: var(--lp-border-strong); --border-interactive: var(--lp-border-interactive); --border-focus: var(--lp-azure); /* 3:1 on every surface */ --border-width-hairline: 1px; --border-width-default: 1px; --border-width-emphasis: 2px; --border-width-focus: 2px; /* Spacing scale — derived, never hand-authored. Closed at ten steps. */ --space-100: calc(var(--lp-space-unit) * 1); /* 4 */ --space-200: calc(var(--lp-space-unit) * 2); /* 8 */ --space-300: calc(var(--lp-space-unit) * 3); /* 12 */ --space-400: calc(var(--lp-space-unit) * 4); /* 16 */ --space-500: calc(var(--lp-space-unit) * 6); /* 24 */ --space-600: calc(var(--lp-space-unit) * 8); /* 32 */ --space-700: calc(var(--lp-space-unit) * 12); /* 48 */ --space-800: calc(var(--lp-space-unit) * 16); /* 64 */ --space-900: calc(var(--lp-space-unit) * 24); /* 96 */ --space-1000: calc(var(--lp-space-unit) * 32); /* 128 */ /* Inset — space INSIDE a container. Constant across breakpoints: padding is an ergonomic and touch-target value. Design Token §C.5. */ --space-inset-tight: var(--space-200); --space-inset-default: var(--space-400); --space-inset-comfortable: var(--space-500); --space-inset-spacious: var(--space-700); /* Stack — vertical space BETWEEN elements. */ --space-stack-tight: var(--space-200); --space-stack-default: var(--space-400); --space-stack-related: var(--space-500); --space-stack-group: var(--space-600); --space-stack-subsection: var(--space-700); --space-stack-section: var(--space-900); /* Inline — horizontal space between elements. */ --space-inline-tight: var(--space-200); --space-inline-default: var(--space-300); --space-inline-group: var(--space-500); /* Layout */ --space-layout-gutter: var(--space-500); --space-layout-margin: var(--space-600); --space-layout-region: var(--space-1000); /* Typography roles. Bound to SEMANTIC LEVEL, never chosen for size — which makes ECS §E.4 structurally enforced. PROVISIONAL FAMILY pending B5. Substituting the family changes no component structure; only these three declarations resolve. */ --type-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --type-family-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --type-family-display: var(--type-family-sans); --type-measure-default: 68ch; --type-measure-narrow: 52ch; --type-measure-wide: 88ch; /* Radius. Radius communicates scale and permanence, never decoration. radius-none on DATA is semantic: rounded corners suggest an approximate object; this content is exact. Visual Language §D.2. */ --radius-none: 0; --radius-subtle: calc(var(--lp-space-unit) * 1); /* 4 */ --radius-control: calc(var(--lp-space-unit) * 2); /* 8 */ --radius-container: calc(var(--lp-space-unit) * 3); /* 12 */ --radius-overlay: calc(var(--lp-space-unit) * 4); /* 16 */ --radius-full: 9999px; /* Motion. Ceiling 480ms; nothing on the WEBSITE exceeds reveal (240ms). Linear is RESERVED for progress — an eased progress bar misrepresents rate, which is a false statement about system state. */ --motion-instant: 0ms; --motion-micro: 80ms; --motion-transition: 160ms; --motion-reveal: 240ms; --motion-overlay: 320ms; --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --motion-ease-enter: cubic-bezier(0, 0, 0, 1); --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1); --motion-ease-linear: linear; /* Elevation. On near-black, shadow is invisible — elevation is expressed through SURFACE LUMINANCE. Shadow is a secondary ambient edge only. Design Token §G.4. */ --elevation-raised: 0 1px 2px rgb(0 0 0 / 0.40); --elevation-overlay: 0 4px 12px rgb(0 0 0 / 0.50); --elevation-modal: 0 8px 32px rgb(0 0 0 / 0.60); --layer-base: 0; --layer-raised: 1; --layer-sticky: 2; --layer-dropdown: 3; --layer-overlay: 4; --layer-modal: 5; --layer-notification: 6; --layer-tooltip: 7; /* tooltips are ALWAYS topmost — a tooltip inside a dialog must render above it or it explains nothing */ /* Grid */ --grid-container-content: 1200px; --grid-container-narrow: 720px; --grid-container-wide: 1440px; /* Targets. Applies to the HIT AREA, not the visual bounds. */ --size-target-minimum: 24px; --size-target-comfortable: 32px; --size-target-spacing: var(--space-100); --opacity-scrim: 0.72; /* the ONE permitted translucency. Opacity is never used to produce a colour. §E.10 */ } /* Touch platforms resolve the SAME token to a larger value — one name, the platform resolves it. Components never branch on platform. §B.5 */ @media (max-width: 1023px) { :root { --size-target-minimum: 44px; --size-target-comfortable: 48px; --size-target-spacing: var(--space-200); } } /* Reduced motion resolves every duration to instant, with TWO mandatory exceptions preserved in components.css: focus indication stays immediate and visible, and determinate progress continues to advance. Reduced motion produces a stiller interface, never a less informative one. */ @media (prefers-reduced-motion: reduce) { :root { --motion-micro: 0ms; --motion-transition: 0ms; --motion-reveal: 0ms; --motion-overlay: 0ms; } }