/* License Ladder — Core design tokens * Import this once at the root of any project that uses the design system. * All components read from these variables; do NOT hard‑code hex values * outside of this file. * * Structure: * 1. Raw color palette (named hexes, every color that exists) * 2. Semantic aliases (role‑based — use these in components) * 3. Type system (font stacks + scale tokens) * 4. Spacing (4px base) * 5. Radius + elevation * 6. Motion tokens * 7. Element defaults (h1..h6, p, code, a — cross‑imports should * inherit without per‑project resets) */ :root { /* ───────────────────────────────────────────────────────────── * 1. Raw palette * ───────────────────────────────────────────────────────────── */ /* Brand */ --ll-orange-600: #E8472C; /* Primary signal orange */ --ll-orange-700: #D03A21; /* Web hover */ --ll-orange-800: #B3331F; /* Pressed / deep */ --ll-navy-900: #0B2742; /* Deep navy */ --ll-navy-950: #061628; /* Navy deep (ink on blueprint) */ --ll-navy-700: #102A47; /* Blueprint panel top */ --ll-navy-800: #0A1F38; /* Blueprint panel base */ /* Paper (light mode) */ --ll-tan-50: #FEFBF3; /* Warm ivory card */ --ll-tan-100: #F6F0DF; /* Subtle card / row */ --ll-tan-200: #F1EBDC; /* Warm tan canvas */ --ll-tan-300: #D9CFB8; /* Warm neutral border */ --ll-tan-cream: #EFE3C8; /* Tan ink on dark */ --ll-tan-muted: #C9BFA3; /* Soft tan ink */ /* Ink (on paper) */ --ll-ink-900: #1A2740; /* Navy ink — primary */ --ll-ink-800: #1C1C1C; /* Content body (spec §7.1) */ --ll-ink-700: #4B5668; /* Ink soft */ --ll-ink-600: #6B6B6B; /* Text secondary (spec) */ --ll-ink-500: #7C8496; /* Ink muted */ --ll-ink-400: #A5A5A5; /* Text disabled (spec) */ /* Neutral surface (spec §7.1 — Adaptibar‑inherited) */ --ll-surface-canvas: #F4F5F7; /* Web bg (spec default) */ --ll-surface-card: #FFFFFF; --ll-surface-subtle: #EBF5FB; /* Illustration bg (v3.2) */ --ll-border-subtle: #E3E5E8; /* Blueprint grid overlay lines */ --ll-grid-line: rgba(173,207,238,0.14); --ll-grid-line-strong: rgba(173,207,238,0.22); --ll-grid-line-glow: rgba(130,190,255,0.36); /* Readiness triad — PRESERVED semantics, do not remap */ --ll-readiness-red: #E74C3C; --ll-readiness-yellow: #F39C12; --ll-readiness-green: #27AE60; /* Deck colors — PRESERVED from v3.2, trade recognition */ --ll-deck-framing: #E67E22; --ll-deck-plumbing: #2980B9; --ll-deck-electrical: #F1C40F; --ll-deck-law: #8E44AD; --ll-deck-bgen: #C84A2E; /* General Building (B) */ /* Chart & feedback */ --ll-chart-green-fill: #8FD18A; --ll-chart-green-deep: #3EA444; --ll-chart-amber: #F3A83A; --ll-chart-red: #E8472C; /* Highlighters — ALL preserved; legacy alias is load‑bearing */ --ll-hl-yellow: #FFE58A; /* Current */ --ll-hl-yellow-legacy: #FFF3CD; /* v3.2 alias — do not remove */ --ll-hl-orange: #F4A460; --ll-hl-pink: #F498B6; /* Info */ --ll-info-blue: #2E6FD6; /* ───────────────────────────────────────────────────────────── * 2. Semantic aliases — components should read from these * ───────────────────────────────────────────────────────────── */ --color-primary-orange: var(--ll-orange-600); --color-primary-orange-hover: var(--ll-orange-700); --color-primary-orange-pressed:var(--ll-orange-800); --color-accent-navy: var(--ll-navy-900); --color-text-primary: var(--ll-ink-900); --color-text-on-paper: var(--ll-ink-900); --color-text-on-dark: var(--ll-tan-cream); --color-text-secondary: var(--ll-ink-700); --color-text-muted: var(--ll-ink-500); --color-text-disabled: var(--ll-ink-400); --color-surface-canvas: var(--ll-tan-200); /* mobile paper */ --color-surface-canvas-web: var(--ll-surface-canvas); --color-surface-card: var(--ll-tan-50); --color-surface-card-subtle: var(--ll-tan-100); --color-surface-illustration: var(--ll-surface-subtle); --color-border-subtle: var(--ll-tan-300); --color-border-web: var(--ll-border-subtle); --color-divider: rgba(30, 40, 60, 0.08); --color-info: var(--ll-info-blue); --color-readiness-red: var(--ll-readiness-red); --color-readiness-yellow: var(--ll-readiness-yellow); --color-readiness-green: var(--ll-readiness-green); /* Deck roles (component API) */ --color-deck-framing: var(--ll-deck-framing); --color-deck-plumbing: var(--ll-deck-plumbing); --color-deck-electrical: var(--ll-deck-electrical); --color-deck-law-business:var(--ll-deck-law); --color-deck-bgen: var(--ll-deck-bgen); /* Blueprint substrate */ --color-blueprint-top: var(--ll-navy-700); --color-blueprint-base: var(--ll-navy-800); --color-blueprint-deep: var(--ll-navy-950); --color-grid: var(--ll-grid-line); --color-grid-strong: var(--ll-grid-line-strong); --color-grid-glow: var(--ll-grid-line-glow); /* ───────────────────────────────────────────────────────────── * 3. Type system * ───────────────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Montserrat', 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Scale — from spec §7.2 */ --font-display-xl: 600 28px/36px var(--font-sans); --font-display-lg: 600 22px/30px var(--font-sans); --font-heading-md: 600 18px/26px var(--font-sans); --font-heading-sm: 600 16px/22px var(--font-sans); --font-body-md: 400 14px/20px var(--font-sans); --font-body-sm: 400 13px/18px var(--font-sans); --font-caption: 400 12px/16px var(--font-sans); --font-stat-xl: 300 36px/40px var(--font-sans); --font-label-caps: 700 11px/14px var(--font-sans); --label-caps-tracking: 0.08em; /* Individual knobs (for finer‑grain control inside components) */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-36: 36px; --fs-44: 44px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ───────────────────────────────────────────────────────────── * 4. Spacing — 4px base, strict scale * ───────────────────────────────────────────────────────────── */ --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; /* ───────────────────────────────────────────────────────────── * 5. Radius + elevation * ───────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 12px; --radius-card: 16px; --radius-pill: 9999px; --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --shadow-card-raised: 0 4px 12px rgba(16,24,40,.12); --shadow-card-paper: 0 8px 28px rgba(11,39,66,0.18), 0 2px 6px rgba(11,39,66,0.06); --shadow-modal: 0 8px 24px rgba(16,24,40,.15); --shadow-fab: 0 4px 14px rgba(11,39,66,0.5); /* ───────────────────────────────────────────────────────────── * 6. Motion * ───────────────────────────────────────────────────────────── */ --ease-settle: cubic-bezier(.2,.9,.2,1); /* card flight, swipe */ --ease-out: cubic-bezier(.16,1,.3,1); /* generic out */ --ease-in-out: cubic-bezier(.4,0,.2,1); /* hover / state */ --dur-fast: 140ms; --dur-base: 220ms; --dur-medium: 320ms; --dur-slow: 420ms; --dur-pulse: 2400ms; } /* ───────────────────────────────────────────────────────────── * 7. Element defaults — cross‑imports inherit without per‑project * resets. Scoped under .ll‑root so importers can opt in. * ───────────────────────────────────────────────────────────── */ html, body, .ll-root { font-family: var(--font-sans); color: var(--color-text-primary); background: var(--color-surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .ll-root, .ll-root * { box-sizing: border-box; } .ll-root h1, .ll-root .h1 { font: var(--font-display-xl); letter-spacing: -0.3px; margin: 0; } .ll-root h2, .ll-root .h2 { font: var(--font-display-lg); letter-spacing: -0.2px; margin: 0; } .ll-root h3, .ll-root .h3 { font: var(--font-heading-md); letter-spacing: -0.1px; margin: 0; } .ll-root h4, .ll-root .h4 { font: var(--font-heading-sm); margin: 0; } .ll-root p { font: var(--font-body-md); margin: 0; } .ll-root small { font: var(--font-caption); color: var(--color-text-muted); } .ll-root .label-caps { font: var(--font-label-caps); letter-spacing: var(--label-caps-tracking); text-transform: uppercase; color: var(--color-text-muted); } .ll-root .stat-xl { font: var(--font-stat-xl); font-family: var(--font-mono); letter-spacing: -1px; color: var(--color-text-primary); } .ll-root code, .ll-root .mono { font-family: var(--font-mono); font-size: 0.92em; } .ll-root a { color: var(--color-info); text-decoration: none; } .ll-root a:hover { text-decoration: underline; } /* ───────────────────────────────────────────────────────────── * Mobile accessibility bumps — spec §7.2 * ───────────────────────────────────────────────────────────── */ @media (max-width: 380px) { :root { --font-body-md: 400 16px/22px var(--font-sans); } } @media (max-width: 360px) { :root { --font-stat-xl: 300 32px/36px var(--font-sans); } } /* ───────────────────────────────────────────────────────────── * Blueprint + paper helper classes (referenced by components) * ───────────────────────────────────────────────────────────── */ .ll-grid-bg { background-image: linear-gradient(to right, var(--color-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px); background-size: 24px 24px; } .ll-grid-bg-fine { background-image: linear-gradient(to right, var(--color-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px); background-size: 12px 12px; } .ll-paper { background: radial-gradient(ellipse at 20% 10%, rgba(232,71,44,0.04), transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(11,39,66,0.05), transparent 50%), var(--color-surface-canvas); }