/* * AMB Consulting — Design Token System * ───────────────────────────────────────────────────────────────────────────── * Three-layer architecture: * * Layer 1 Primitives Raw values with no semantic meaning. * Named by scale position, not intent. * * Layer 2 Aliases Semantic names that reference Layer 1 with fallbacks. * Components MUST reference these, never Layer 1 directly. * * Layer 3 Components Component-scoped overrides that reference Layer 2. * Defined in the component's own CSS/SCSS block. * * Source of truth for SCSS: _sass/_variables.scss * Keep both files in sync when adding/changing tokens. * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVES ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Color primitives ── */ --prim-maroon-900: #1c0811; /* darkest brand maroon */ --prim-maroon-800: #2e1020; --prim-maroon-700: #4a1e35; --prim-maroon-600: #2a0f1e; /* text-body */ --prim-maroon-500: #4a2535; /* warm body copy on cream */ --prim-maroon-400: #7a5566; /* muted text */ --prim-section-dark: #0f0509; /* near-black section background */ --prim-gold-500: #c8a84b; /* primary gold */ --prim-gold-400: #dfc07a; /* light gold */ --prim-gold-300: #f0dfa0; /* pale gold */ --prim-cream-200: #f5efe2; /* base cream surface */ --prim-cream-300: #e8dfc8; /* darker cream */ --prim-white: #ffffff; --prim-black: #000000; --prim-error-500: #e05b7b; --prim-error-300: #ffb4b4; /* ── Opacity scale (white-on-dark) ── */ --prim-alpha-90: 0.9; --prim-alpha-80: 0.8; --prim-alpha-75: 0.75; --prim-alpha-65: 0.65; --prim-alpha-60: 0.6; --prim-alpha-55: 0.55; --prim-alpha-50: 0.5; --prim-alpha-45: 0.45; --prim-alpha-40: 0.4; --prim-alpha-38: 0.38; --prim-alpha-35: 0.35; --prim-alpha-30: 0.3; --prim-alpha-25: 0.25; --prim-alpha-20: 0.2; --prim-alpha-15: 0.15; --prim-alpha-12: 0.12; --prim-alpha-10: 0.1; --prim-alpha-08: 0.08; --prim-alpha-06: 0.06; --prim-alpha-05: 0.05; --prim-alpha-04: 0.04; --prim-alpha-03: 0.03; --prim-alpha-02: 0.02; /* ── Spacing scale (4px base) ── */ --prim-space-1: 4px; --prim-space-2: 8px; --prim-space-3: 12px; --prim-space-4: 16px; --prim-space-5: 20px; --prim-space-6: 24px; --prim-space-7: 32px; --prim-space-8: 40px; --prim-space-9: 48px; --prim-space-10: 60px; --prim-space-11: 80px; --prim-space-12: 120px; /* ── Type scale ── */ --prim-text-2xs: 9px; --prim-text-xs: 10px; --prim-text-sm: 11px; --prim-text-base: 12px; --prim-text-md: 13px; --prim-text-lg: 14px; --prim-text-xl: 16px; --prim-text-2xl: 18px; --prim-text-3xl: 22px; --prim-text-4xl: 24px; --prim-text-5xl: 28px; --prim-text-6xl: 32px; --prim-text-7xl: 36px; --prim-text-8xl: 42px; --prim-text-9xl: 52px; --prim-text-10xl: 64px; --prim-text-11xl: 82px; /* ── Border radius ── */ --prim-radius-none: 0; --prim-radius-xs: 2px; --prim-radius-sm: 4px; --prim-radius-md: 14px; --prim-radius-round: 50%; --prim-radius-pill: 999px; /* ── Duration ── */ --prim-dur-fast: 0.2s; --prim-dur-normal: 0.35s; --prim-dur-slow: 0.6s; --prim-dur-xslow: 0.9s; /* ── Easing ── */ --prim-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-index scale ── */ --prim-z-100: 100; --prim-z-800: 800; --prim-z-900: 900; --prim-z-999: 999; --prim-z-1000: 1000; --prim-z-1200: 1200; --prim-z-2000: 2000; --prim-z-8000: 8000; --prim-z-9000: 9000; --prim-z-9001: 9001; } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC ALIASES Every alias references a Layer 1 primitive with a raw-value fallback. Components must use these names, not Layer 1 directly. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand colors ── */ --color-brand: var(--prim-maroon-900, #1c0811); --color-brand-mid: var(--prim-maroon-800, #2e1020); --color-brand-light: var(--prim-maroon-700, #4a1e35); --color-accent: var(--prim-gold-500, #c8a84b); --color-accent-light: var(--prim-gold-400, #dfc07a); --color-accent-pale: var(--prim-gold-300, #f0dfa0); /* ── Surface colors ── */ --color-surface-base: var(--prim-cream-200, #f5efe2); --color-surface-cream: var(--prim-cream-300, #e8dfc8); --color-surface-dark: var(--prim-section-dark, #0f0509); --color-surface-brand: var(--prim-maroon-900, #1c0811); --color-surface-white: var(--prim-white, #ffffff); /* ── Text colors ── */ --color-text: var(--prim-maroon-600, #2a0f1e); --color-text-muted: var(--prim-maroon-400, #7a5566); --color-text-warm: var(--prim-maroon-500, #4a2535); --color-text-accent: var(--prim-gold-500, #c8a84b); --color-text-light: var(--prim-white, #ffffff); --color-text-on-dark-90: rgba(255,255,255, 0.9); --color-text-on-dark-80: rgba(255,255,255, 0.8); --color-text-on-dark-75: rgba(255,255,255, 0.75); --color-text-on-dark-65: rgba(255,255,255, 0.65); --color-text-on-dark-60: rgba(255,255,255, 0.6); --color-text-on-dark-55: rgba(255,255,255, 0.55); --color-text-on-dark-50: rgba(255,255,255, 0.5); --color-text-on-dark-45: rgba(255,255,255, 0.45); --color-text-on-dark-40: rgba(255,255,255, 0.4); --color-text-on-dark-38: rgba(255,255,255, 0.38); --color-text-on-dark-35: rgba(255,255,255, 0.35); --color-text-on-dark-30: rgba(255,255,255, 0.3); --color-text-on-dark-25: rgba(255,255,255, 0.25); --color-text-on-dark-20: rgba(255,255,255, 0.2); --color-text-on-dark-15: rgba(255,255,255, 0.15); /* ── Border colors ── */ --color-border-accent-faint: rgba(200,168, 75, 0.08); --color-border-accent-subtle: rgba(200,168, 75, 0.10); --color-border-accent-soft: rgba(200,168, 75, 0.12); --color-border-accent-medium: rgba(200,168, 75, 0.15); --color-border-accent-strong: rgba(200,168, 75, 0.20); --color-border-accent-accent: rgba(200,168, 75, 0.25); --color-border-accent-visible: rgba(200,168, 75, 0.30); --color-border-accent-cta: rgba(200,168, 75, 0.40); --color-border-brand-hairline: rgba( 28, 8, 17, 0.12); /* ── Overlay colors ── */ --color-overlay-dim: rgba(0,0,0, 0.70); --color-overlay-black-20: rgba(0,0,0, 0.20); --color-overlay-black-25: rgba(0,0,0, 0.25); --color-overlay-lightbox: rgba(0,0,0, 0.93); --color-overlay-video: rgba(0,0,0, 0.92); --color-overlay-brand: rgba(28,8,17, 0.72); /* ── Glass surfaces ── */ --color-glass-02: rgba(255,255,255, 0.02); --color-glass-03: rgba(255,255,255, 0.03); --color-glass-05: rgba(255,255,255, 0.05); --color-glass-06: rgba(255,255,255, 0.06); --color-glass-15: rgba(255,255,255, 0.15); /* ── Feedback colors ── */ --color-error: var(--prim-error-500, #e05b7b); --color-error-soft: var(--prim-error-300, #ffb4b4); --color-error-border: rgba(255,120,120, 0.35); --color-error-bg: rgba(255, 80, 80, 0.08); /* ── Spacing ── */ --space-1: var(--prim-space-1, 4px); --space-2: var(--prim-space-2, 8px); --space-3: var(--prim-space-3, 12px); --space-4: var(--prim-space-4, 16px); --space-5: var(--prim-space-5, 20px); --space-6: var(--prim-space-6, 24px); --space-7: var(--prim-space-7, 32px); --space-8: var(--prim-space-8, 40px); --space-9: var(--prim-space-9, 48px); --space-10: var(--prim-space-10, 60px); --space-11: var(--prim-space-11, 80px); --space-12: var(--prim-space-12, 120px); /* Named aliases for common usage */ --space-section: var(--prim-space-12, 120px); --space-section-mobile: var(--prim-space-11, 80px); --space-container-pad: var(--prim-space-8, 40px); --space-gutter-mobile: var(--prim-space-5, 20px); /* ── Typography ── */ --font-display: 'Cormorant Garamond', serif; --font-heading: 'Cinzel', serif; --font-body: 'Inter', sans-serif; --text-2xs: var(--prim-text-2xs, 9px); --text-xs: var(--prim-text-xs, 10px); --text-sm: var(--prim-text-sm, 11px); --text-base: var(--prim-text-base, 12px); --text-md: var(--prim-text-md, 13px); --text-lg: var(--prim-text-lg, 14px); --text-xl: var(--prim-text-xl, 16px); --text-2xl: var(--prim-text-2xl, 18px); --text-3xl: var(--prim-text-3xl, 22px); --text-4xl: var(--prim-text-4xl, 24px); --text-5xl: var(--prim-text-5xl, 28px); --text-6xl: var(--prim-text-6xl, 32px); --text-7xl: var(--prim-text-7xl, 36px); --text-8xl: var(--prim-text-8xl, 42px); --text-9xl: var(--prim-text-9xl, 52px); --text-10xl: var(--prim-text-10xl, 64px); --text-11xl: var(--prim-text-11xl, 82px); --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --line-height-loose: 1.85; --line-height-airy: 1.9; /* ── Border radius ── */ --radius-none: var(--prim-radius-none, 0); --radius-xs: var(--prim-radius-xs, 2px); --radius-sm: var(--prim-radius-sm, 4px); --radius-md: var(--prim-radius-md, 14px); --radius-round: var(--prim-radius-round, 50%); --radius-pill: var(--prim-radius-pill, 999px); /* ── Elevation / shadows ── */ --shadow-fab: 0 8px 32px rgba(0,0,0, 0.40); --shadow-card-hover: 0 40px 80px rgba(28,8,17, 0.15); --shadow-modal: 0 40px 100px rgba(0,0,0, 0.35); --shadow-play: 0 8px 32px rgba(0,0,0, 0.45); /* ── Z-index ── */ --z-floating-cta: var(--prim-z-800, 800); --z-admin-fab: var(--prim-z-900, 900); --z-mobile-menu: var(--prim-z-999, 999); --z-nav: var(--prim-z-1000, 1000); --z-mobile-menu-front: var(--prim-z-1200, 1200); --z-team-modal: var(--prim-z-2000, 2000); --z-lightbox: var(--prim-z-8000, 8000); --z-gallery-video: var(--prim-z-9000, 9000); --z-admin-overlay: var(--prim-z-9000, 9000); --z-admin-panel: var(--prim-z-9001, 9001); /* ── Motion ── */ --ease: var(--prim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); --duration-fast: var(--prim-dur-fast, 0.2s); --duration-base: var(--prim-dur-normal, 0.35s); --duration-slow: var(--prim-dur-slow, 0.6s); --duration-xslow: var(--prim-dur-xslow, 0.9s); --transition-fast: var(--duration-fast) var(--ease); --transition-base: var(--duration-base) var(--ease); --transition-slow: var(--duration-slow) var(--ease); }