/* * Aurum UI — Design Tokens * ------------------------- * Primary font: Geist. Brand accent: #ff9900 (amber gold). * Design language: clean, dark-mode-first, pill buttons, minimal borders. * Breakpoints: 479px / 767px / 991px / 1440px (container max). * * Usage: * or * Toggle with JS: document.documentElement.dataset.theme = 'dark' */ /* ─── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Lato:wght@400;700&display=swap'); /* ─── LIGHT MODE (default) ──────────────────────────────────────────────────── */ :root { /* ── Color: Brand ─────────────────────────────────────── */ --color-brand-primary: #111111; --color-brand-accent: #ff9900; --color-brand-accent-hover: #e68a00; --color-brand-accent-subtle: rgba(255, 153, 0, 0.12); /* ── Color: Neutrals ──────────────────────────────────── */ --color-neutral-0: #ffffff; --color-neutral-50: #f3efeb; --color-neutral-100: #e9eaeb; --color-neutral-200: #d8d3cc; --color-neutral-300: #dbd9d7; --color-neutral-400: #8a8a87; --color-neutral-500: #615e5b; --color-neutral-600: #383837; --color-neutral-700: #1e1e1d; --color-neutral-800: #111111; --color-neutral-900: #000000; /* ── Color: Surface ───────────────────────────────────── */ --color-surface-default: #ffffff; --color-surface-subtle: #f3efeb; --color-surface-muted: #dbd9d7; --color-surface-elevated: #ffffff; --color-surface-overlay: rgba(17, 17, 17, 0.48); --color-surface-action: #111111; --color-surface-action-hover: var(--color-brand-accent); /* ── Color: Text ──────────────────────────────────────── */ --color-text-primary: #111111; --color-text-secondary: #615e5b; --color-text-muted: #8a8a87; --color-text-disabled: #d8d3cc; --color-text-inverse: #ffffff; --color-text-on-accent: #111111; --color-text-overlay-subtle: rgba(255, 255, 255, 0.6); /* ── Color: Border ────────────────────────────────────── */ --color-border-default: #111111; --color-border-subtle: #e9eaeb; --color-border-muted: #d8d3cc; --color-border-focus: var(--color-brand-accent); /* ── Color: Semantic ──────────────────────────────────── */ --color-success: #22c55e; --color-success-subtle: rgba(34, 197, 94, 0.1); --color-warning: #f59e0b; --color-warning-subtle: rgba(245, 158, 11, 0.1); --color-error: #ef4444; --color-error-subtle: rgba(239, 68, 68, 0.1); --color-info: #3b82f6; --color-info-subtle: rgba(59, 130, 246, 0.1); /* ── Typography: Families ─────────────────────────────── */ --font-family-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'Geist Mono', 'SF Mono', Monaco, 'Courier New', monospace; --font-family-display: var(--font-family-primary); /* Font switcher target (overridden by JS font picker) */ --font-family-active: var(--font-family-primary); /* ── Typography: Sizes ────────────────────────────────── */ --font-size-micro: clamp(13px, 0.8125em, 0.8125em); --font-size-xs: clamp(14px, 0.875em, 0.875em); --font-size-sm: 1rem; --font-size-md: clamp(16px, 1.125em, 1.125em); --font-size-lg: clamp(18px, 1.25em, 1.25em); --font-size-xl: clamp(20px, 1.5em, 1.5em); --font-size-2xl: clamp(22px, 1.75em, 1.75em); --font-size-3xl: clamp(24px, 2em, 2em); --font-size-4xl: clamp(28px, 2.5em, 2.5em); --font-size-5xl: clamp(32px, 3.5em, 3.5em); --font-size-6xl: clamp(40px, 3.75em, 3.75em); /* ── Typography: Weights ──────────────────────────────── */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Typography: Line heights ─────────────────────────── */ --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ── Typography: Letter spacing ───────────────────────── */ --letter-spacing-tight: -0.03em; --letter-spacing-snug: -0.01em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.03em; /* ── Spacing (4px base grid) ──────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-36: 144px; /* ── Layout ───────────────────────────────────────────── */ --nav-height: 88px; --container-max: 1440px; --container-min: 992px; --container-padding: clamp(24px, 5em, 80px); --grid-columns: 24; --grid-gutter: 1.5em; /* ── Radius ───────────────────────────────────────────── */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Active radius character */ --radius-btn: var(--radius-full); --radius-card: var(--radius-xl); --radius-input: var(--radius-full); --radius-badge: var(--radius-full); --radius-modal: var(--radius-2xl); /* ── Shadows (elevation) ──────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16); /* Active shadow */ --shadow-card: var(--shadow-none); --shadow-modal: var(--shadow-xl); /* ── Motion: Easing curves ─── */ --ease-out-1: cubic-bezier(0.65, 1, 0.90, 1); --ease-out-2: cubic-bezier(0.50, 1, 0.89, 1); --ease-out-3: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-4: cubic-bezier(0.25, 1, 0.50, 1); --ease-out-5: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-6: cubic-bezier(0.19, 1, 0.22, 1); --ease-inout-1: cubic-bezier(0.37, 0, 0.63, 1); --ease-inout-2: cubic-bezier(0.45, 0, 0.55, 1); --ease-inout-3: cubic-bezier(0.65, 0, 0.35, 1); --ease-inout-4: cubic-bezier(0.76, 0, 0.24, 1); --ease-inout-5: cubic-bezier(0.83, 0, 0.17, 1); --ease-inout-6: cubic-bezier(0.87, 0, 0.13, 1); /* ── Motion: Durations ────────────────────────────────── */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; --duration-slower: 800ms; /* ── Motion: Transitions ──────────────────────────────── */ --transition-fast: var(--duration-fast) var(--ease-inout-3); --transition-normal: var(--duration-normal) var(--ease-inout-5); --transition-slow: var(--duration-slow) var(--ease-inout-5); --transition-color: color var(--duration-normal) var(--ease-inout-5), background-color var(--duration-normal) var(--ease-inout-5); --transition-btn: opacity var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal), background-color var(--duration-normal); --transition-all: all var(--duration-normal) var(--ease-inout-5); /* ── Z-Index ──────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-nav: 300; --z-modal: 400; --z-toast: 500; --z-overlay: 600; } /* ─── DARK MODE ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Color: Surface ───────────────────────────────────── */ --color-surface-default: #111111; --color-surface-subtle: #1e1e1d; --color-surface-muted: #383837; --color-surface-elevated: #1e1e1d; --color-surface-overlay: rgba(0, 0, 0, 0.64); --color-surface-action: #ffffff; --color-surface-action-hover: var(--color-brand-accent); /* ── Color: Text ──────────────────────────────────────── */ --color-text-primary: #ffffff; --color-text-secondary: #8a8a87; --color-text-muted: rgba(255, 255, 255, 0.6); --color-text-disabled: rgba(255, 255, 255, 0.24); --color-text-inverse: #111111; --color-text-on-accent: #111111; --color-text-overlay-subtle: rgba(255, 255, 255, 0.6); /* ── Color: Border ────────────────────────────────────── */ --color-border-default: #ffffff; --color-border-subtle: rgba(216, 211, 204, 0.1); --color-border-muted: #383837; --color-border-focus: var(--color-brand-accent); /* ── Shadows ──────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.70); } /* ─── BASE RESETS ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-family-active, var(--font-family-primary)); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-snug); color: var(--color-text-primary); background-color: var(--color-surface-default); transition: background-color var(--duration-normal) var(--ease-inout-5), color var(--duration-normal) var(--ease-inout-5); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── TYPOGRAPHY ────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-active, var(--font-family-primary)); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-primary); margin: 0 0 var(--space-4); } h1 { font-size: var(--font-size-6xl); } h2 { font-size: var(--font-size-5xl); } h3 { font-size: var(--font-size-4xl); } h4 { font-size: var(--font-size-3xl); } h5 { font-size: var(--font-size-2xl); } h6 { font-size: var(--font-size-xl); } p { font-size: var(--font-size-lg); line-height: var(--line-height-snug); color: var(--color-text-primary); margin: 0 0 var(--space-4); } a { color: var(--color-brand-accent); text-decoration: none; transition: color var(--transition-normal); } a:hover { color: var(--color-brand-accent-hover); } ::selection { background-color: var(--color-brand-accent-subtle); color: var(--color-text-primary); }