/* ============================================================================= Cartopian Web — Design System Tokens ----------------------------------------------------------------------------- This file is the single source of truth for visual design primitives across the marketing site. Every component in subsequent tasks must consume these tokens; ad-hoc colors, font sizes, or spacing values are not permitted. Token naming convention: `--{category}-{name}` (per SPEC-01-001). Layers, in order of consumption: 1. Primitive tokens — raw scales (color ramps, type scale, space scale). 2. Semantic aliases — meaning-bearing names that point at primitives. 3. Component tokens — surface/border/shadow tokens used by UI parts. When the designer (gemini) provides a finalized palette, primitive values may change; semantic and component tokens reference primitives by name and should rarely need editing. Constraints: - Vanilla CSS custom properties only (DEC-001 / ENGINEERING.md). - No preprocessors, no frameworks, no build step. - Breakpoints are NOT defined here — CSS custom properties cannot be used inside @media queries. Phone < 640px, Tablet 640–1023px, Desktop ≥ 1024px (consumed by TASK-01-002 grid CSS). ============================================================================= */ :root, [data-theme="dark"] { /* --------------------------------------------------------------------------- 1. PRIMITIVE COLOR RAMPS --------------------------------------------------------------------------- Three ramps of 10 stops each: primary (brand), neutral (UI chrome), accent (highlights/CTAs). Stops follow the conventional 50–900 scale where 50 is near-white and 900 is near-black. Mid stops (500–600) are the action band. --------------------------------------------------------------------------- */ /* Primary — deep ink. Conveys precision and trust; reads well on both light and dark surfaces. Action band: 600. */ --color-primary-50: #eef2ff; --color-primary-100: #e0e7ff; --color-primary-200: #c7d2fe; --color-primary-300: #a5b4fc; --color-primary-400: #818cf8; --color-primary-500: #6366f1; --color-primary-600: #2D3250; --color-primary-700: #4338ca; --color-primary-800: #3730a3; --color-primary-900: #1e1b4b; /* Neutral — slate ramp with a faint cool-blue undertone. Used for text, backgrounds, borders, and any non-branded chrome. */ --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; /* Accent — electric periwinkle. Pairs with the dark primary for high-contrast CTAs, callouts, and contour-style highlights. Use sparingly; accent is loud. */ --color-accent-50: #fffbeb; --color-accent-100: #fef3c7; --color-accent-200: #fde68a; --color-accent-300: #fcd34d; --color-accent-400: #fbbf24; --color-accent-500: #7091F5; --color-accent-600: #d97706; --color-accent-700: #b45309; --color-accent-800: #92400e; --color-accent-900: #78350f; /* Status — semantic state colors. Single value each (not full ramps) since v1 only needs flat success/warning/error/info usage. */ --color-success-500: #10b981; --color-success-600: #059669; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-info-500: #0ea5e9; --color-info-600: #0284c7; /* --------------------------------------------------------------------------- 2. SEMANTIC COLOR ALIASES --------------------------------------------------------------------------- Components should reach for these by default. Editing a semantic token re-themes the site without touching every component file. --------------------------------------------------------------------------- */ --color-text-primary: #F0F4F8; /* Body copy, headings */ --color-text-secondary: #94A3B8; /* Subdued copy, captions */ --color-text-muted: #64748B; /* Metadata, timestamps */ --color-text-inverse: #F0F4F8; /* Text on dark surfaces */ --color-text-brand: #7091F5; /* Branded inline accents */ --color-bg-page: #1A1C2C; /* Page background */ --color-bg-surface: #2D3250; /* Cards, panels, modals */ --color-bg-subtle: #242942; /* Alt sections, code blocks */ --color-bg-inverse: #F8FAFC; /* Dark sections (hero, footer) */ --color-bg-brand: var(--color-primary-600); /* Solid brand surface */ --color-bg-brand-subtle: #1E1B4B; /* Tinted brand surface */ --color-border: #334155; /* Default border */ --color-border-strong: #475569; /* Emphasis border */ --color-border-inverse: #F1F5F9; /* Border on dark surfaces */ --color-link: #F0F4F8; --color-link-hover: #FFFFFF; --color-link-visited: #94A3B8; --color-focus-ring: #7091F5; /* Keyboard focus outlines */ /* --------------------------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------------------------- Inter is the design intent (loaded via @font-face in a later task or via a hosted file). The fallback stack is system-native so the page reads well even before the web font arrives. */ --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Type scale — modular ratio ~1.2 (minor third) tuned for editorial reading. */ --font-size-xs: 0.75rem; /* 12px — fine print, badges */ --font-size-sm: 0.875rem; /* 14px — captions, helper text */ --font-size-base: 1rem; /* 16px — body copy default */ --font-size-md: 1.125rem; /* 18px — emphasized body, lead text */ --font-size-lg: 1.25rem; /* 20px — small headings */ --font-size-xl: 1.5rem; /* 24px — h3 */ --font-size-2xl: 1.875rem; /* 30px — h2 */ --font-size-3xl: 2.25rem; /* 36px — h1 on inner pages */ --font-size-4xl: 3rem; /* 48px — hero headlines, tablet */ --font-size-5xl: 3.75rem; /* 60px — hero headlines, desktop */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; /* Headings */ --line-height-snug: 1.375; --line-height-base: 1.5; /* Body copy */ --line-height-relaxed: 1.75; /* Long-form prose */ /* Letter-spacing — small adjustments for premium typography. */ --letter-spacing-tight: -0.02em; /* Large display headings */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* Eyebrow labels, all-caps */ --font-letter-spacing-heading: var(--letter-spacing-tight); /* --------------------------------------------------------------------------- 4. SPACING SCALE --------------------------------------------------------------------------- 4px base unit. Numeric suffix equals (value / 4) for the small steps and matches Tailwind's spacing scale for familiarity. Use these for padding, margin, gap, and layout offsets. --------------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --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 — major section gaps */ --space-40: 10rem; /* 160px — hero vertical rhythm */ /* --------------------------------------------------------------------------- 5. RADII --------------------------------------------------------------------------- Soft-but-restrained corner rounding consistent with the premium aesthetic. --------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — tags, inline pills */ --radius-md: 0.375rem; /* 6px — inputs, small buttons */ --radius-lg: 0.5rem; /* 8px — buttons, cards default */ --radius-xl: 0.75rem; /* 12px — feature cards */ --radius-2xl: 1rem; /* 16px — hero panels, modals */ --radius-3xl: 1.5rem; /* 24px — large illustrative blocks */ --radius-full: 9999px; /* Pills, avatars */ /* --------------------------------------------------------------------------- 6. SHADOWS / ELEVATION --------------------------------------------------------------------------- Soft, layered shadows suitable for a premium light UI. Use sparingly: elevation should communicate hierarchy, not decoration. --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18); --shadow-2xl: 0 32px 64px -16px rgba(15, 23, 42, 0.25); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35); /* primary-500 @ 35% */ /* --------------------------------------------------------------------------- 7. MOTION --------------------------------------------------------------------------- Conservative durations and easings. Hover state transitions are fast; entrances and large-area changes can use `slow`. --------------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* Material-style standard */ --easing-emphasized: cubic-bezier(0.2, 0.0, 0.2, 1.0); /* Slightly more anticipation */ --easing-linear: linear; /* --------------------------------------------------------------------------- 8. LAYOUT --------------------------------------------------------------------------- Page-level container widths and z-index scale. Breakpoints live in CSS media queries inside the grid stylesheet (TASK-01-002), not here. --------------------------------------------------------------------------- */ --container-sm: 40rem; /* 640px */ --container-md: 48rem; /* 768px — long-form prose width */ --container-lg: 64rem; /* 1024px */ --container-xl: 80rem; /* 1280px — page chrome max */ --container-2xl: 90rem; /* 1440px — hero max */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* --------------------------------------------------------------------------- 9. COMPONENT TOKENS --------------------------------------------------------------------------- Component-specific aliases that resolve to primitive/semantic tokens. These let component CSS in later tasks reference one stable name even if the underlying primitive changes. Add tokens here as components come online; do not pre-populate speculative values. --------------------------------------------------------------------------- */ /* Buttons */ --button-radius: var(--radius-lg); --button-font-weight: var(--font-weight-semibold); --button-padding-y: var(--space-3); --button-padding-x: var(--space-5); --button-primary-bg: #7091F5; --button-primary-bg-hover: #6683DD; --button-primary-text: #1A1C2C; --button-secondary-bg: transparent; --button-secondary-border: #F0F4F8; --button-secondary-text: #F0F4F8; /* Inputs */ --input-radius: var(--radius-md); --input-padding-y: var(--space-3); --input-padding-x: var(--space-4); --input-bg: var(--color-bg-surface); --input-border: var(--color-border-strong); --input-border-focus: var(--color-primary-500); --input-text: var(--color-text-primary); --input-placeholder: var(--color-text-muted); /* Cards / surfaces */ --card-bg: #2D3250; --card-border: var(--color-border); --card-radius: var(--radius-xl); --card-padding: var(--space-6); --card-shadow: 0 8px 30px rgba(0,0,0,0.3); /* Navigation */ --nav-height: var(--space-16); /* 64px header */ --nav-bg: rgba(26, 28, 44, 0.9); --nav-border: var(--color-border); --nav-link-color: var(--color-text-secondary); --nav-link-active: var(--color-text-primary); /* Footer */ --footer-bg: #0F172A; --footer-text: #94A3B8; --footer-link: #F0F4F8; --footer-logo-bg: #1E293B; --footer-link-hover: #C7D2FE; } [data-theme="light"] { --color-text-primary: #2D3250; --color-text-secondary: #475569; --color-text-muted: #94A3B8; --color-text-inverse: #FFFFFF; --color-text-brand: #4F46E5; --color-bg-page: #FFFFFF; --color-bg-surface: #F8FAFC; --color-bg-subtle: #F1F5F9; --color-bg-inverse: #1A1C2C; --color-bg-brand-subtle: #F0F4F8; --color-border: #E2E8F0; --color-border-strong: #CBD5E1; --color-border-inverse: #334155; --color-link: #2D3250; --color-link-hover: #1A1C2C; --color-link-visited: #475569; --button-secondary-border: #2D3250; --button-secondary-text: #2D3250; --card-bg: #FFFFFF; --card-shadow: var(--shadow-sm); --nav-bg: rgba(255, 255, 255, 0.9); } /* ============================================================================= USAGE NOTES ----------------------------------------------------------------------------- Headings: h1 { font-family: var(--font-family-heading); font-size: var(--font-size-4xl); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); } Body: body { font-family: var(--font-family-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text-primary); background: var(--color-bg-page); } Section padding: section { padding: var(--space-16) var(--space-6); } Buttons (later task — shown for reference): .btn-primary { background: var(--button-primary-bg); color: var(--button-primary-text); border-radius: var(--button-radius); padding: var(--button-padding-y) var(--button-padding-x); transition: background var(--duration-fast) var(--easing-standard); } Rules of thumb: - Reach for SEMANTIC tokens (--color-text-primary) before primitives (--color-neutral-900). Primitives are escape hatches. - Use COMPONENT tokens in component CSS so re-skinning is one-edit. - Never inline a hex value or a px size that isn't already a token. If a needed value is missing, add it here first. ============================================================================= */