/* ============================================================================ * Drape — Design Tokens (colors, type, spacing, radii, shadows, motion) * ---------------------------------------------------------------------------- * Single source of truth for the Drape brand. Every consumer reads from here. * * Hue strategy — 5 distinct hues + a neutral ramp. No accidental green twins. * --brand emerald 162° primary actions, links, "positive" data * --accent indigo 280° editorial, social cards, slide accents * --danger coral red 25° errors, real failures, negative trends * --caution amber 50° flaky / warning / needs-attention * --info steel blue 245° info banners, suppressions * * Reserved alias: --success === --brand. Drape has ONE green. * Body sans + display family are the same native UI stack — differentiation * comes from weight/size/tracking, not family. No webfonts; no @import. * ============================================================================ */ @layer tokens { :root { color-scheme: light; /* ── Brand & accents ────────────────────────────────────────────── */ --brand: oklch(52% 0.15 162deg); --brand-strong: oklch(46% 0.16 162deg); --brand-soft: oklch(52% 0.15 162deg / 0.14); --brand-ink: oklch(96% 0 0deg); --accent: oklch(58% 0.16 280deg); --accent-strong: oklch(50% 0.18 280deg); --accent-soft: oklch(58% 0.16 280deg / 0.14); /* ── Status (semantic) ──────────────────────────────────────────── */ --danger: oklch(60% 0.20 25deg); --danger-strong: oklch(54% 0.21 25deg); --danger-soft: oklch(60% 0.20 25deg / 0.14); --caution: oklch(70% 0.16 50deg); --caution-strong: oklch(58% 0.16 50deg); --caution-soft: oklch(70% 0.16 50deg / 0.16); --info: oklch(60% 0.13 245deg); --info-strong: oklch(54% 0.14 245deg); --info-soft: oklch(60% 0.13 245deg / 0.14); /* Single-green policy */ --success: var(--brand); --success-strong: var(--brand-strong); --success-soft: var(--brand-soft); /* Data-vis sentiment */ --positive: var(--brand); --positive-soft: var(--brand-soft); --negative: var(--danger); --negative-soft: var(--danger-soft); /* ── Neutrals (achromatic, slight cool tilt for dark) ──────────── */ --neutral-0: oklch(100% 0 0deg); --neutral-50: oklch(98% 0 0deg); --neutral-100: oklch(96% 0 0deg); --neutral-200: oklch(92% 0 0deg); --neutral-300: oklch(85% 0 0deg); --neutral-400: oklch(70% 0 0deg); --neutral-500: oklch(55% 0 0deg); --neutral-600: oklch(40% 0 0deg); --neutral-700: oklch(28% 0 0deg); --neutral-800: oklch(20% 0 0deg); --neutral-900: oklch(13% 0 0deg); /* ── Surfaces ───────────────────────────────────────────────────── */ --surface: var(--neutral-0); /* page background */ --surface-sunken: var(--neutral-100); /* sub-areas, table headers */ --surface-raised: oklch(99% 0 0deg); /* one stop brighter than surface — cards visible without --border */ --surface-overlay: var(--neutral-0); /* menus, popovers */ --surface-inverse: var(--neutral-900); /* dark CTA banners on light pages */ /* ── Foreground (text & icons) ──────────────────────────────────── */ --fg: var(--neutral-800); --fg-secondary: var(--neutral-600); --fg-muted: var(--neutral-500); --fg-faint: var(--neutral-400); --fg-on-inverse: var(--neutral-50); /* ── Borders ────────────────────────────────────────────────────── */ --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--brand); /* ── Type families ──────────────────────────────────────────────── */ /* Body sans on every platform. Display rides the same stack — the difference is weight/size/tracking, not family. No webfonts. */ --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif; --font-display: -apple-system, blinkmacsystemfont, "Segoe UI", system-ui, roboto, "Helvetica Neue", arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Source Code Pro", menlo, consolas, monospace; /* ── Type sizes ─────────────────────────────────────────────────── */ --text-2xs: 0.6875rem; /* 11 — micro labels */ --text-xs: 0.75rem; /* 12 — meta */ --text-sm: 0.8125rem; /* 13 — dense body */ --text-md: 0.9375rem; /* 15 — body default */ --text-lg: 1.0625rem; /* 17 — emphasis body */ --text-xl: 1.25rem; /* 20 — h4 */ --text-2xl: 1.5rem; /* 24 — h3 */ --text-3xl: 1.875rem; /* 30 — h2 */ --text-4xl: 2.5rem; /* 40 — h1 in app */ --text-5xl: clamp(2.5rem, 5vw + 1rem, 4.25rem); --text-6xl: clamp(3rem, 7vw + 1rem, 5.5rem); --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.14em; /* ── Spacing (4px base, 9 stops) ────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ /* ── Radii ──────────────────────────────────────────────────────── */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 18px; --radius-5: 28px; --radius-pill: 9999px; --radius-full: 50%; /* ── Shadows (low-elevation, cool) ──────────────────────────────── */ --shadow-1: 0 1px 2px oklch(20% 0 0deg / 0.06), 0 0 0 1px var(--border) inset; --shadow-2: 0 4px 12px -2px oklch(20% 0 0deg / 0.10), 0 0 0 1px var(--border) inset; --shadow-3: 0 18px 40px -12px oklch(20% 0 0deg / 0.18); --shadow-glow-brand: 0 0 0 4px var(--brand-soft); --shadow-glow-accent: 0 0 0 4px var(--accent-soft); --shadow-focus-danger: 0 0 0 4px var(--danger-soft); /* ── Motion ─────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; /* Canonical transition shorthands — single declaration per call site, any future easing change is one edit. */ --transition-fast: var(--duration-1) var(--ease); --transition-normal: var(--duration-2) var(--ease); --transition-slow: var(--duration-3) var(--ease); /* ── Z-index ────────────────────────────────────────────────────── */ --z-base: 0; --z-sticky: 20; --z-overlay: 100; --z-popover: 200; --z-modal: 300; --z-toast: 400; /* ── Component sizing (not in --space-* scale; component-shape decisions) */ --button-height-sm: 1.775rem; /* 28px */ --button-height-md: 2.375rem; /* 38px */ --button-height-lg: 3.275rem; /* 52px */ --input-height-sm: 2rem; /* 32px */ --input-height-md: 2.5rem; /* 40px */ --input-height-lg: 3rem; /* 48px */ --avatar-size-xs: 1.5rem; /* 24px */ --avatar-size-sm: 2rem; /* 32px */ --avatar-size-md: 2.5rem; /* 40px */ --avatar-size-lg: 3.5rem; /* 56px */ --avatar-size-xl: 5rem; /* 80px */ /* ── Syntax highlighting (Pygments theme — see code-viewer.css) ──── */ --syntax-comment: oklch(50% 0.04 220deg); /* slate, italic */ --syntax-keyword: var(--brand-strong); /* if, for, class — bold green */ --syntax-keyword-type: oklch(48% 0.16 350deg); /* int, str — mauve */ --syntax-name: var(--info-strong); /* function/class/namespace names */ --syntax-builtin: var(--brand); /* len, range, True — distinct from keywords */ --syntax-string: oklch(48% 0.18 25deg); /* "hello" — warm coral */ --syntax-string-escape: var(--caution-strong); /* \n, \t — amber */ --syntax-number: oklch(50% 0 0deg); /* numerics + operators */ --syntax-variable: var(--accent); /* $vars, @vars — indigo */ --syntax-decorator: var(--accent-strong); /* @decorator, deep indigo */ --syntax-attribute: var(--caution-strong); /* HTML attrs, labels — amber */ --syntax-constant: var(--danger-strong); /* MAX_SIZE, named constants */ --syntax-error: var(--danger); /* exceptions, error tokens */ --syntax-error-border: var(--danger); --syntax-regex: oklch(45% 0.12 350deg); /* /pattern/ — mauve */ --syntax-diff-deleted: var(--danger-strong); /* git diff `-` lines */ --syntax-diff-inserted: var(--brand-strong); /* git diff `+` lines */ --syntax-generic-output: var(--fg-muted); /* CLI output, whitespace */ --syntax-generic-heading: var(--info-strong); /* prompts, section heads */ --syntax-generic-traceback: var(--info); /* file paths in tracebacks */ --syntax-highlight-line: oklch(95% 0.06 90deg / 0.5); /* selected line bg — pale amber */ } /* ============================================================================ * Dark mode — auto-toggles via prefers-color-scheme. No manual class toggle. * ============================================================================ */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --brand: oklch(70% 0.15 162deg); --brand-strong: oklch(78% 0.15 162deg); --brand-soft: oklch(70% 0.15 162deg / 0.18); --brand-ink: oklch(15% 0.02 162deg); --accent: oklch(72% 0.14 280deg); --accent-strong: oklch(80% 0.13 280deg); --accent-soft: oklch(72% 0.14 280deg / 0.18); --danger: oklch(70% 0.19 25deg); --danger-strong: oklch(76% 0.18 25deg); --danger-soft: oklch(70% 0.19 25deg / 0.16); --caution: oklch(78% 0.15 50deg); --caution-strong: oklch(84% 0.14 50deg); --caution-soft: oklch(78% 0.15 50deg / 0.18); --info: oklch(72% 0.12 245deg); --info-strong: oklch(80% 0.11 245deg); --info-soft: oklch(72% 0.12 245deg / 0.18); /* Cool near-black — never pure #000, never warm */ --neutral-0: oklch(15% 0.005 240deg); --neutral-50: oklch(17% 0.005 240deg); --neutral-100: oklch(20% 0.006 240deg); --neutral-200: oklch(26% 0.006 240deg); --neutral-300: oklch(34% 0.005 240deg); --neutral-400: oklch(48% 0.004 240deg); --neutral-500: oklch(62% 0.003 240deg); --neutral-600: oklch(75% 0.002 240deg); --neutral-700: oklch(85% 0 0deg); --neutral-800: oklch(94% 0 0deg); --neutral-900: oklch(98% 0 0deg); --surface: var(--neutral-0); --surface-sunken: oklch(12% 0.005 240deg); --surface-raised: var(--neutral-100); --surface-overlay: var(--neutral-200); --surface-inverse: var(--neutral-900); --fg: var(--neutral-800); --fg-secondary: var(--neutral-700); --fg-muted: var(--neutral-500); --fg-faint: var(--neutral-400); --fg-on-inverse: var(--neutral-50); --border: oklch(28% 0.005 240deg); --border-strong: oklch(36% 0.005 240deg); --shadow-1: 0 1px 2px oklch(0% 0 0deg / 0.4), 0 0 0 1px var(--border) inset; --shadow-2: 0 6px 18px -4px oklch(0% 0 0deg / 0.55), 0 0 0 1px var(--border) inset; --shadow-3: 0 24px 60px -16px oklch(0% 0 0deg / 0.7); /* Syntax tokens — brighten for dark surfaces. */ --syntax-comment: oklch(65% 0.04 220deg); --syntax-keyword-type: oklch(72% 0.14 350deg); --syntax-string: oklch(72% 0.16 25deg); --syntax-number: oklch(70% 0 0deg); --syntax-regex: oklch(70% 0.10 350deg); --syntax-highlight-line: oklch(70% 0.10 90deg / 0.15); /* The remaining --syntax-* tokens reference --brand / --accent / --danger / --caution / --info / --fg-muted, which already auto-shift via their own dark-mode declarations above. No re-declaration needed here. */ } } /* ============================================================================ * Reduced motion — honor OS-level preference. Non-negotiable a11y (WCAG 2.3.3). * The * !important block suffices; no need to also redeclare --duration-*. * ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } } }