/* ========================================================================== OLIVIER SONNET — Design System: The Tectonic Grid Design Tokens (CSS Custom Properties) ========================================================================== */ :root { /* -------------------------------------------------------------------------- 2. COLORS — The Tectonic Grid Palette High-contrast industrialism: Intense Red, Charcoal, Silver -------------------------------------------------------------------------- */ /* --- Primary (Red / Forge Heat) --- */ --ds-primary: #ffb3ac; --ds-primary-container: #d32f2f; --ds-on-primary: #680008; --ds-on-primary-container: #fff2f0; --ds-primary-fixed: #ffdad6; --ds-primary-fixed-dim: #ffb3ac; --ds-on-primary-fixed: #410003; --ds-on-primary-fixed-variant: #930010; /* --- Secondary (Silver / Brushed Metal) --- */ --ds-secondary: #c4c6cc; --ds-secondary-container: #46494e; --ds-on-secondary: #2d3135; --ds-on-secondary-container: #b6b8be; --ds-secondary-fixed: #e0e2e8; --ds-secondary-fixed-dim: #c4c6cc; --ds-on-secondary-fixed: #181c20; --ds-on-secondary-fixed-variant: #44474b; /* --- Tertiary --- */ --ds-tertiary: #c6c6c7; --ds-tertiary-container: #6e7070; --ds-on-tertiary: #2f3131; --ds-on-tertiary-container: #f4f4f4; --ds-tertiary-fixed: #e2e2e2; --ds-tertiary-fixed-dim: #c6c6c7; --ds-on-tertiary-fixed: #1a1c1c; --ds-on-tertiary-fixed-variant: #454747; /* --- Surface Hierarchy (Tonal Layering) --- */ --ds-surface: #121416; --ds-surface-dim: #121416; --ds-surface-bright: #37393b; --ds-surface-container-lowest: #0c0e10; --ds-surface-container-low: #1a1c1e; --ds-surface-container: #1e2022; --ds-surface-container-high: #282a2c; --ds-surface-container-highest: #333537; --ds-on-surface: #e2e2e5; --ds-on-surface-variant: #e4beba; --ds-inverse-surface: #e2e2e5; --ds-inverse-on-surface: #2f3133; --ds-surface-tint: #ffb3ac; /* --- Outlines & Borders --- */ --ds-outline: #ab8985; --ds-outline-variant: #5b403d; /* --- Background --- */ --ds-background: #121416; /* --- Error --- */ --ds-error: #ffb4ab; --ds-on-error: #690005; --ds-error-container: #93000a; --ds-on-error-container: #ffdad6; /* --- Inverse --- */ --ds-inverse-primary: #ba1a20; /* -------------------------------------------------------------------------- 3. TYPOGRAPHY — Sign-painting meets architectural labeling -------------------------------------------------------------------------- */ /* Font Families */ --ds-font-headline: 'Space Grotesk', sans-serif; --ds-font-body: 'Inter', sans-serif; --ds-font-label: 'Inter', sans-serif; /* Typography Scale */ --ds-text-display-lg: 4.5rem; /* 72px */ --ds-text-display-md: 3.5rem; /* 56px */ --ds-text-display-sm: 2.75rem; /* 44px */ --ds-text-headline-lg: 2.5rem; /* 40px */ --ds-text-headline-md: 2rem; /* 32px */ --ds-text-headline-sm: 1.5rem; /* 24px */ --ds-text-title-lg: 1.375rem; /* 22px */ --ds-text-title-md: 1rem; /* 16px */ --ds-text-title-sm: 0.875rem; /* 14px */ --ds-text-body-lg: 1.125rem; /* 18px */ --ds-text-body-md: 1rem; /* 16px */ --ds-text-body-sm: 0.875rem; /* 14px */ --ds-text-label-lg: 0.875rem; /* 14px */ --ds-text-label-md: 0.75rem; /* 12px */ --ds-text-label-sm: 0.625rem; /* 10px */ /* Font Weights */ --ds-weight-light: 300; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-weight-extrabold: 800; --ds-weight-black: 900; /* Letter Spacing */ --ds-tracking-tighter: -0.02em; --ds-tracking-tight: -0.01em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.05em; --ds-tracking-wider: 0.1em; --ds-tracking-widest: 0.2em; /* Line Heights */ --ds-leading-none: 1; --ds-leading-tight: 1.1; --ds-leading-snug: 1.25; --ds-leading-normal: 1.5; --ds-leading-relaxed:1.625; /* -------------------------------------------------------------------------- 4. ELEVATION & DEPTH — Tonal Layering (NO floating shadows) -------------------------------------------------------------------------- */ /* Hard offset shadow (ds block) */ --ds-shadow-ds: 8px 8px 0px 0px var(--ds-surface); --ds-shadow-ds-sm: 4px 4px 0px 0px var(--ds-surface); --ds-shadow-ds-lg: 12px 12px 0px 0px var(--ds-surface); /* Hard drop shadow for surfaces (monochrome) */ --ds-shadow-hard: 4px 4px 0px var(--ds-surface-container-lowest); /* -------------------------------------------------------------------------- 5. SPACING — 8px Grid -------------------------------------------------------------------------- */ --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.25rem; /* 20px */ --ds-space-6: 1.5rem; /* 24px */ --ds-space-8: 2rem; /* 32px */ --ds-space-10: 2.5rem; /* 40px */ --ds-space-12: 3rem; /* 48px */ --ds-space-16: 4rem; /* 64px */ --ds-space-20: 5rem; /* 80px */ --ds-space-24: 6rem; /* 96px */ /* -------------------------------------------------------------------------- 6. BORDER RADIUS — ZERO (Non-negotiable) -------------------------------------------------------------------------- */ --ds-radius-none: 0px; --ds-radius-sm: 0px; --ds-radius-md: 0px; --ds-radius-lg: 0px; --ds-radius-xl: 0px; --ds-radius-full: 0px; /* -------------------------------------------------------------------------- 7. BORDERS — Ghost Borders & Tonal Separation -------------------------------------------------------------------------- */ --ds-border-ghost: 1px solid rgba(91, 64, 61, 0.15); --ds-border-subtle: 1px solid rgba(226, 226, 229, 0.1); --ds-border-structural: 2px solid var(--ds-surface); --ds-border-accent: 2px solid var(--ds-primary-container); --ds-border-top-accent: 4px solid var(--ds-primary-container); /* -------------------------------------------------------------------------- 8. TRANSITIONS -------------------------------------------------------------------------- */ --ds-transition-fast: all 0.15s ease; --ds-transition-base: all 0.2s ease; --ds-transition-slow: all 0.3s ease; --ds-transition-slower: all 0.5s ease; /* -------------------------------------------------------------------------- 9. CONTAINER WIDTHS -------------------------------------------------------------------------- */ --ds-container-sm: 640px; --ds-container-md: 768px; --ds-container-lg: 1024px; --ds-container-xl: 1280px; --ds-container-2xl: 1440px; --ds-container-max: 1920px; /* -------------------------------------------------------------------------- 10. Z-INDEX SCALE -------------------------------------------------------------------------- */ --ds-z-base: 0; --ds-z-content: 10; --ds-z-above: 20; --ds-z-nav: 50; --ds-z-overlay: 100; --ds-z-modal: 200; /* -------------------------------------------------------------------------- 11. PIXEL GRID (Decorative grid overlay) -------------------------------------------------------------------------- */ --ds-grid-size: 60px; --ds-grid-color: rgba(226, 226, 229, 0.08); /* -------------------------------------------------------------------------- 12. GLASSMORPHISM -------------------------------------------------------------------------- */ --ds-glass-bg: rgba(18, 20, 22, 0.8); --ds-glass-blur: 20px; }