/* ============================================ SPINAKER DESIGN TOKENS — Brand System v1 Rookery palette · Plus Jakarta Sans + Fira Code Purple-shifted foundation · Directional light system ============================================ LIGHT DIRECTION PRINCIPLE: Light enters from top-left. Every color exists in three values: light face, base, shadow face. - Sidebar / bottom bar = shadow (darkest) - Main content = lit face (lightest) - Cards / elevated = surface values - Hover = element turns toward light (lighter) - Pressed = turns away from light (shadow) DARK MODE = "Night chapter" (default) LIGHT MODE = "Dawn chapter" (class .theme-light on ) ============================================ */ :root { /* ========================================== COLORS: Foundation (purple-shifted darks) ========================================== */ --color-foundation-shadow: #12101e; /* Sidebar, bottom bar, deepest surfaces */ --color-foundation-base: #1a1828; /* Page background */ --color-foundation-light: #242235; /* Main content area, hover backgrounds */ /* ========================================== COLORS: Surface (elevated elements) ========================================== */ --color-surface-shadow: #1e1c30; /* Card bottom edge, dividers */ --color-surface-base: #242235; /* Cards, dropdowns, popovers */ --color-surface-light: #2e2c42; /* Card hover, selected rows, active states */ /* ========================================== COLORS: Border ========================================== */ --color-border-subtle: #1e1c30; /* Row dividers, light separators */ --color-border-base: #2a2840; /* Standard borders */ --color-border-bright: #3a3858; /* Focus rings, active borders */ /* ========================================== COLORS: Text ========================================== */ --color-text-primary: #eae6e0; /* Headings, active items, names */ --color-text-secondary: #9898b0; /* Body, descriptions, values */ --color-text-muted: #5a5870; /* Labels, placeholders, captions */ /* ========================================== COLORS: Accent — Teal Primary action · Active · Success ========================================== */ --color-teal-light: #78d0c4; /* Hover face, focus rings */ --color-teal-base: #5ab8b0; /* Canonical: CTAs, active badge, links */ --color-teal-shadow: #408880; /* Pressed face, depth */ --color-teal-bg: rgba(90, 184, 176, 0.12); /* Badge/tag background */ /* ========================================== COLORS: Accent — Peach Warning · Paused · Attention ========================================== */ --color-peach-light: #f0c098; /* Hover face */ --color-peach-base: #e8a070; /* Canonical: paused badge, warnings */ --color-peach-shadow: #b87848; /* Pressed, depth */ --color-peach-bg: rgba(232, 160, 112, 0.12); /* ========================================== COLORS: Accent — Violet Draft · Informational · Neutral accent ========================================== */ --color-violet-light: #a888c8; /* Hover face */ --color-violet-base: #8868a8; /* Canonical: draft badge, info, tags */ --color-violet-shadow: #684888; /* Pressed, depth */ --color-violet-bg: rgba(136, 104, 168, 0.12); /* ========================================== COLORS: Accent — Rose Error · Destructive · Not delivering ========================================== */ --color-rose-light: #e8a8b8; /* Hover face */ --color-rose-base: #d0889a; /* Canonical: error, not delivering */ --color-rose-shadow: #a06070; /* Pressed, depth */ --color-rose-bg: rgba(208, 136, 154, 0.15); /* ========================================== COLORS: Extended palette Data viz, illustrations, brand expression ========================================== */ --color-cream-light: #f8e0c0; --color-cream-base: #f0c898; --color-cream-shadow: #c8a070; --color-sand-light: #e8e0d0; --color-sand-base: #d9ccb5; /* Warm emphasis text, table names */ --color-sand-shadow: #b0a490; --color-sage-light: #88a898; --color-sage-base: #6a8a82; --color-sage-shadow: #4a6a60; --color-mist-light: #b0c8d0; --color-mist-base: #9ab3c3; /* Secondary links, cool data, fog */ --color-mist-shadow: #7090a0; /* ========================================== COLORS: Semantic aliases Map UI states to brand colors ========================================== */ --color-status-active: var(--color-teal-base); --color-status-active-bg: var(--color-teal-bg); --color-status-paused: var(--color-peach-base); --color-status-paused-bg: var(--color-peach-bg); --color-status-draft: var(--color-violet-base); --color-status-draft-bg: var(--color-violet-bg); --color-status-error: var(--color-rose-base); --color-status-error-bg: var(--color-rose-bg); --color-status-scheduled: var(--color-mist-base); --color-status-scheduled-bg: rgba(154, 179, 195, 0.12); /* ========================================== COLORS: Functional aliases Used by components — swap these for theming ========================================== */ --surface-primary: var(--color-foundation-base); --surface-secondary: var(--color-foundation-light); --surface-elevated: var(--color-surface-base); --surface-elevated-hover: var(--color-surface-light); --surface-sidebar: var(--color-foundation-shadow); --surface-bottombar: var(--color-foundation-shadow); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-on-accent: var(--color-foundation-shadow); --text-warm: var(--color-sand-base); --border-default: var(--color-border-base); --border-subtle: var(--color-border-subtle); --border-focus: var(--color-border-bright); --accent-primary: var(--color-teal-base); --accent-primary-hover: var(--color-teal-light); --accent-primary-pressed: var(--color-teal-shadow); --accent-warning: var(--color-peach-base); --accent-info: var(--color-violet-base); --accent-danger: var(--color-rose-base); /* ========================================== GRADIENTS Website/brand layer only for interactive elements. Atmospheric gradients permitted in-app on surfaces. ========================================== */ --gradient-rookery-spectrum: linear-gradient(135deg, #5ab8b0, #6a8a82, #d9ccb5, #e8a070, #d0889a, #8868a8); --gradient-warm-dream: linear-gradient(135deg, #f0c898, #e8a070, #d0889a, #8868a8); --gradient-mist: linear-gradient(135deg, #5ab8b0, #9ab3c3, #d9ccb5); --gradient-atmosphere: linear-gradient(180deg, rgba(90,184,176,0.06), transparent 40%, transparent 60%, rgba(136,104,168,0.04)); /* ========================================== TYPOGRAPHY ========================================== */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* Type scale (used for both website and in-app) */ --text-display: 3rem; /* 48px — Display headings, hero */ --text-h1: 2.25rem; /* 36px — Page titles */ --text-h2: 1.5rem; /* 24px — Section headings */ --text-h3: 1.125rem; /* 18px — Card titles, sub-sections */ --text-body: 0.875rem; /* 14px — Body text */ --text-small: 0.75rem; /* 12px — Table cells, descriptions */ --text-caption: 0.6875rem; /* 11px — Buttons, badges, tabs */ --text-mono-data: 0.8125rem; /* 13px — Metrics, KPIs */ --text-mono-label: 0.625rem; /* 10px — IDs, codes, timestamps */ --text-mono-tiny: 0.5625rem; /* 9px — Section labels, column headers */ /* Font weights */ --weight-extralight: 200; /* Display headings (website) */ --weight-light: 300; /* H1, hero subtext */ --weight-regular: 400; /* Body, small, mono */ --weight-medium: 500; /* H3, buttons, nav */ --weight-semibold: 600; /* Emphasis buttons, bold UI */ --weight-bold: 700; /* Sparingly — never for body text */ /* Line heights */ --leading-tight: 1.1; /* Display, H1 */ --leading-snug: 1.25; /* H2, H3 */ --leading-normal: 1.6; /* Body text */ --leading-relaxed: 1.8; /* Long-form, descriptions */ --leading-mono: 1.5; /* Monospace content */ /* Letter spacing */ --tracking-tight: -0.025em; /* Display, H1 */ --tracking-normal: 0; /* Body */ --tracking-wide: 0.05em; /* Captions, buttons */ --tracking-wider: 0.1em; /* Uppercase labels */ --tracking-widest: 0.15em; /* Section labels (mono tiny) */ /* ========================================== SPACING (4px base grid) ========================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ========================================== BORDER RADIUS ========================================== */ --radius-none: 0; --radius-sm: 4px; /* Badges, small elements */ --radius-md: 6px; /* Buttons, inputs */ --radius-lg: 8px; /* Cards (in-app) */ --radius-xl: 10px; /* Cards (website), panels */ --radius-full: 9999px; /* Pills, avatars */ /* ========================================== SHADOWS Purple-shifted to match foundation ========================================== */ --shadow-sm: 0 1px 2px rgba(18, 16, 30, 0.3); --shadow-md: 0 4px 12px rgba(18, 16, 30, 0.4); --shadow-lg: 0 8px 30px rgba(18, 16, 30, 0.5); --shadow-xl: 0 16px 60px rgba(18, 16, 30, 0.6); --shadow-glow-teal: 0 0 20px rgba(90, 184, 176, 0.15); --shadow-glow-peach: 0 0 20px rgba(232, 160, 112, 0.1); --shadow-glow-violet: 0 0 20px rgba(136, 104, 168, 0.1); /* ========================================== TRANSITIONS ========================================== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* ========================================== BREAKPOINTS (reference — use in media queries) Desktop-first: max-width ========================================== */ /* --bp-lg: 1024px */ /* --bp-md: 768px */ /* --bp-sm: 640px */ /* --bp-xs: 480px */ /* ========================================== CONTAINER ========================================== */ --container-max: 72rem; --container-narrow: 48rem; --container-px: var(--space-6); /* ========================================== SECTION PADDING ========================================== */ --section-py: var(--space-20); --section-py-lg: var(--space-32); } @media (max-width: 768px) { :root { --section-py: var(--space-12); --section-py-lg: var(--space-16); } } /* ============================================ DAWN CHAPTER (Light Mode) Apply with class="theme-light" on Not an inversion — its own Spinaker chapter. ============================================ */ .theme-light { /* Foundation */ --color-foundation-shadow: #eee2d4; --color-foundation-base: #f4ebe0; --color-foundation-light: #faf6ee; /* Surface */ --color-surface-shadow: #dcd2c4; --color-surface-base: #e8e0d4; --color-surface-light: #f0e8dc; /* Border */ --color-border-subtle: #e8e0d4; --color-border-base: #dcd2c4; --color-border-bright: #c8c0b0; /* Text — purple-shifted ink, not pure black */ --color-text-primary: #2a2838; --color-text-secondary: #5a4a40; --color-text-muted: #a09080; /* Accents — darkened for light background contrast */ --color-teal-light: #50b0a4; --color-teal-base: #3a9890; --color-teal-shadow: #2a7870; --color-teal-bg: rgba(58, 152, 144, 0.1); --color-peach-light: #d89058; --color-peach-base: #c87848; --color-peach-shadow: #a86038; --color-peach-bg: rgba(200, 120, 72, 0.1); --color-violet-light: #8060a0; --color-violet-base: #6a4e88; --color-violet-shadow: #503870; --color-violet-bg: rgba(106, 78, 136, 0.08); --color-rose-light: #b87080; --color-rose-base: #a86070; --color-rose-shadow: #884858; --color-rose-bg: rgba(168, 96, 112, 0.1); /* Extended — darkened */ --color-cream-base: #d8a870; --color-sand-base: #8a7868; --color-sage-base: #4a7a70; --color-mist-base: #7090a0; /* Shadows — lighter, warmer */ --shadow-sm: 0 1px 3px rgba(42, 40, 56, 0.06); --shadow-md: 0 4px 12px rgba(42, 40, 56, 0.08); --shadow-lg: 0 8px 24px rgba(42, 40, 56, 0.1); --shadow-xl: 0 16px 48px rgba(42, 40, 56, 0.12); }