/* ========================================================================= BASESITE DESIGN SYSTEM — Core Tokens Philosophy: "Electric Precision" — The Neo-Architectural Canvas Hierarchy through tonal shifts, not lines. Asymmetry. Air. Anchored by Electric Purple against an expansive sophisticated neutral scale. ========================================================================= */ @import url('../fonts/inter.css'); :root { /* ----------------------------------------------------------------------- PRIMITIVES — raw colors. Do not reference directly in components. Reference the semantic tokens below instead. ----------------------------------------------------------------------- */ /* Electric Purple — brand anchor */ --purple-50: #f1eeff; --purple-100: #e4deff; --purple-200: #c3b8ff; --purple-300: #9985ff; --purple-400: #6e56f5; --purple-500: #4c33e1; --purple-600: #3300ca; /* PRIMARY */ --purple-700: #2a00a8; --purple-800: #1f0080; --purple-900: #12004d; /* Neutral scale — "stacked paper" greys with a subtle cool cast */ --neutral-0: #ffffff; --neutral-50: #f8f9fc; --neutral-100: #f2f3f6; --neutral-150: #ebecef; --neutral-200: #e1e2e5; --neutral-300: #c8c4d8; --neutral-400: #9a97ab; --neutral-500: #6b6880; --neutral-600: #4b4960; --neutral-700: #2f2d40; --neutral-800: #1c1b2a; --neutral-900: #0d0c15; /* Semantic accents — used sparingly */ --signal-success: #0f8a5f; --signal-success-container: #d4f1e4; --signal-warn: #b5740b; --signal-warn-container: #fbe8c6; --signal-error: #c4253a; --signal-error-container: #fad6db; --signal-info: #1a62c4; --signal-info-container: #d6e4f7; /* ----------------------------------------------------------------------- SEMANTIC COLOR TOKENS — use these in components. ----------------------------------------------------------------------- */ /* Brand */ --primary: var(--purple-600); --primary-container: var(--purple-500); --primary-hover: var(--purple-700); --on-primary: var(--neutral-0); --secondary-container: var(--purple-200); --on-secondary-container: var(--purple-900); /* Surfaces — the "stacked paper" tiers */ --surface: var(--neutral-50); /* Level 0 foundation */ --surface-container-lowest: var(--neutral-0); /* Highest pop */ --surface-container-low: var(--neutral-100); /* Sectioning */ --surface-container: var(--neutral-150); --surface-container-high: var(--neutral-200); --surface-container-highest: var(--neutral-200); /* Input resting */ --surface-inverse: var(--neutral-900); --on-surface: var(--neutral-900); --on-surface-muted: var(--neutral-500); --on-surface-subtle: var(--neutral-400); --on-surface-inverse: var(--neutral-50); /* Ghost borders — felt more than seen */ --outline-variant: var(--neutral-300); --ghost-border: color-mix(in oklch, var(--outline-variant) 15%, transparent); --focus-ring: color-mix(in oklch, var(--primary) 40%, transparent); /* Glass */ --glass-surface: color-mix(in oklch, var(--surface) 80%, transparent); --glass-surface-strong: color-mix(in oklch, var(--neutral-0) 70%, transparent); --glass-blur: 16px; /* Signature gradient — hero / primary CTA only */ --gradient-primary: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-500) 100%); --gradient-hero: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 60%, var(--purple-400) 100%); /* ----------------------------------------------------------------------- TYPOGRAPHY Switzer for body / UI AND display. Full 100–900 weight range. JetBrains Mono for technical / data readouts. Display uses tight tracking for authority. Labels use wide tracking. ----------------------------------------------------------------------- */ --font-sans: 'Switzer', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Switzer', 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale — ramped for editorial contrast */ --type-display-lg-size: 3.5rem; /* 56 */ --type-display-lg-lh: 1.02; --type-display-lg-track: -0.025em; --type-display-lg-weight: 700; --type-display-md-size: 2.75rem; /* 44 */ --type-display-md-lh: 1.05; --type-display-md-track: -0.022em; --type-display-md-weight: 700; --type-headline-lg-size: 2rem; /* 32 */ --type-headline-lg-lh: 1.15; --type-headline-lg-track: -0.015em; --type-headline-lg-weight: 600; --type-headline-md-size: 1.5rem; /* 24 */ --type-headline-md-lh: 1.25; --type-headline-md-track: -0.012em; --type-headline-md-weight: 600; --type-title-size: 1.125rem; /* 18 */ --type-title-lh: 1.4; --type-title-track: -0.006em; --type-title-weight: 600; --type-body-lg-size: 1rem; /* 16 */ --type-body-lg-lh: 1.55; --type-body-lg-track: 0; --type-body-lg-weight: 400; --type-body-md-size: 0.875rem; /* 14 */ --type-body-md-lh: 1.5; --type-body-md-track: 0; --type-body-md-weight: 400; --type-label-md-size: 0.75rem; /* 12 */ --type-label-md-lh: 1.35; --type-label-md-track: 0.05em; --type-label-md-weight: 600; --type-label-md-transform: uppercase; --type-mono-size: 0.8125rem;/* 13 */ --type-mono-lh: 1.45; --type-mono-track: 0; --type-mono-weight: 500; /* ----------------------------------------------------------------------- SPACING — 4px baseline, ramped. Use generously. Air is luxury. ----------------------------------------------------------------------- */ --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 */ --space-10: 8rem; /* 128 */ /* ----------------------------------------------------------------------- RADII ----------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ----------------------------------------------------------------------- ELEVATION — Ambient, tinted, diffused. Never default grey drop shadow. Shadow color = tinted on-surface at low opacity. ----------------------------------------------------------------------- */ --shadow-ambient-sm: 0 2px 12px -2px color-mix(in oklch, var(--neutral-900) 4%, transparent); --shadow-ambient-md: 0 8px 30px -8px color-mix(in oklch, var(--neutral-900) 6%, transparent), 0 2px 6px -2px color-mix(in oklch, var(--neutral-900) 4%, transparent); --shadow-ambient-lg: 0 18px 48px -12px color-mix(in oklch, var(--neutral-900) 8%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--neutral-900) 5%, transparent); --shadow-brand: 0 12px 36px -10px color-mix(in oklch, var(--primary) 35%, transparent); /* ----------------------------------------------------------------------- MOTION — confident, quick, eased. No bounces. ----------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 420ms; } /* =========================================================================== SEMANTIC ELEMENT STYLES — ready-to-use text classes and base resets. =========================================================================== */ html, body { background: var(--surface); color: var(--on-surface); font-family: var(--font-sans); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .display-lg, h1.display { font-family: var(--font-display); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-track); font-weight: var(--type-display-lg-weight); text-wrap: balance; } .display-md { font-family: var(--font-display); font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-track); font-weight: var(--type-display-md-weight); text-wrap: balance; } .headline-lg, h2 { font-family: var(--font-display); font-size: var(--type-headline-lg-size); line-height: var(--type-headline-lg-lh); letter-spacing: var(--type-headline-lg-track); font-weight: var(--type-headline-lg-weight); text-wrap: balance; } .headline-md, h3 { font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-lh); letter-spacing: var(--type-headline-md-track); font-weight: var(--type-headline-md-weight); } .title, h4 { font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); font-weight: var(--type-title-weight); } .body-lg, p { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); font-weight: var(--type-body-lg-weight); text-wrap: pretty; } .body-md { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); } .label-md, .overline { font-size: var(--type-label-md-size); line-height: var(--type-label-md-lh); letter-spacing: var(--type-label-md-track); font-weight: var(--type-label-md-weight); text-transform: var(--type-label-md-transform); color: var(--on-surface-muted); } .mono, code { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-lh); font-weight: var(--type-mono-weight); } /* Focus ring — a 2px Ghost Border of primary at 40% */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Base link */ a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--primary-hover); }