/* ============================================================ BONUSKI · AURORA DESIGN SYSTEM tokens.css — THE SINGLE SOURCE OF TRUTH ------------------------------------------------------------ Every colour, font, size, space, radius, shadow and breakpoint lives here as a CSS custom property. layout.css and components.css may only reference var(--…). Change --color-primary below → the whole site recolours, because the gold ramp, gradients and glows are all derived from it via color-mix(). ============================================================ */ /* Fonts are enqueued by functions.php (bonuski-fonts). */ :root { /* --------------------------------------------------------- 1 · BRAND PALETTE --------------------------------------------------------- */ --color-primary: #f0a823; /* gold — the one knob */ --color-primary-bright: color-mix(in srgb, #ffffff 34%, var(--color-primary)); --color-primary-soft: color-mix(in srgb, #ffffff 16%, var(--color-primary)); --color-primary-deep: color-mix(in srgb, #000000 32%, var(--color-primary)); --color-secondary: #6486d6; /* cobalt */ --color-secondary-bright: #7aa4ff; --color-accent: #7367d8; /* violet */ /* Derived gold tints (follow --color-primary automatically) */ --primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent); --primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent); --primary-16: color-mix(in srgb, var(--color-primary) 16%, transparent); --primary-25: color-mix(in srgb, var(--color-primary) 25%, transparent); --primary-35: color-mix(in srgb, var(--color-primary) 35%, transparent); --primary-45: color-mix(in srgb, var(--color-primary) 45%, transparent); --primary-65: color-mix(in srgb, var(--color-primary) 65%, transparent); --secondary-10: color-mix(in srgb, var(--color-secondary) 10%, transparent); --secondary-20: color-mix(in srgb, var(--color-secondary) 20%, transparent); --secondary-35: color-mix(in srgb, var(--color-secondary) 35%, transparent); /* --------------------------------------------------------- 2 · NEUTRAL RAMP — 5 greys (bluish, dark-theme tuned) --------------------------------------------------------- */ --gray-1: #e6e9f2; /* lightest */ --gray-2: #aab4cc; --gray-3: #6e7a99; --gray-4: #3d4763; --gray-5: #1a2038; /* darkest */ /* --------------------------------------------------------- 3 · STATUS --------------------------------------------------------- */ --color-success: #4ade80; --color-warning: #fbbf24; --color-danger: #f87171; --color-info: var(--color-secondary); /* --------------------------------------------------------- 4 · SEMANTIC SURFACES / TEXT (DARK — default) --------------------------------------------------------- */ --color-bg: #080b20; --color-bg-2: #0a0e26; --color-surface: #11163a; --color-surface-2: #151436; --color-surface-3: #0d1230; --color-elevated: #0d1028; --color-border: color-mix(in srgb, var(--color-secondary) 22%, transparent); --color-border-strong: color-mix(in srgb, var(--color-secondary) 40%, transparent); --color-border-gold: var(--primary-45); --color-text: #ffffff; --color-text-secondary: var(--gray-2); --color-text-muted: var(--gray-3); --color-on-primary: #0a0e20; /* text/icons on top of gold */ --color-link: var(--color-primary-soft); /* Glass fills used by chips, ghost buttons, inputs */ --glass: linear-gradient(135deg, rgba(18,26,51,0.70) 0%, rgba(12,18,38,0.65) 100%); --glass-hover:linear-gradient(135deg, rgba(18,26,51,0.85) 0%, rgba(12,18,38,0.75) 100%); --glass-line: rgba(255,255,255,0.35); /* --------------------------------------------------------- 5 · GRADIENTS & DECOR --------------------------------------------------------- */ --grad-cta: linear-gradient(135deg, var(--color-primary-bright) 0%, var(--color-primary-soft) 30%, var(--color-primary) 65%, var(--color-primary-deep) 100%); --grad-brand-text: linear-gradient(135deg, #ffffff 0%, var(--color-primary-bright) 100%); --grad-aurora: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(57,87,181,0.44) 0%, transparent 55%), radial-gradient(ellipse 50% 35% at 85% 10%, rgba(115,103,216,0.21) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 50% 100%, var(--primary-16) 0%, transparent 60%), var(--color-bg); --grad-hero: radial-gradient(ellipse at 0% 0%, rgba(57,87,181,0.70) 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, rgba(115,103,216,0.45) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, var(--primary-45) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(140,148,220,0.30) 0%, transparent 50%), linear-gradient(135deg, #131a44 0%, #161c42 100%); --grad-card: linear-gradient(135deg, #11163a 0%, #0d1230 100%); --grad-card-featured: linear-gradient(135deg, #141838 0%, #0e1330 100%); --grad-bonus: linear-gradient(135deg, rgba(122,164,255,0.18) 0%, rgba(122,164,255,0.08) 100%); --grad-glass: linear-gradient(180deg, rgba(18,26,51,0.70) 0%, rgba(12,18,38,0.65) 100%); --grad-tint: linear-gradient(135deg, var(--primary-16) 0%, var(--primary-06) 100%); /* Star-dust overlay for hero / aurora panels */ --star-field: radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,0.9), transparent 70%), radial-gradient(2px 2px at 82% 68%, rgba(255,255,255,0.8), transparent 70%), radial-gradient(1.5px 1.5px at 55% 14%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.5px 1.5px at 12% 52%, rgba(125,170,240,0.7), transparent 70%), radial-gradient(1.5px 1.5px at 92% 18%, rgba(170,130,230,0.65), transparent 70%), radial-gradient(1px 1px at 48% 48%, rgba(255,255,255,0.55), transparent 70%), radial-gradient(1px 1px at 65% 28%, rgba(255,220,150,0.7), transparent 70%), radial-gradient(1px 1px at 28% 82%, rgba(255,255,255,0.5), transparent 70%); /* --------------------------------------------------------- 6 · TYPOGRAPHY (2 families) --------------------------------------------------------- */ --font-display: 'Montserrat', Arial, sans-serif; /* headings, CTAs, logo */ --font-body: 'Inter', 'Montserrat', Arial, sans-serif; /* long-form copy */ /* Type scale — 6 steps */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.625rem; /* 26 */ --fs-2xl: 2.125rem; /* 34 */ /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.1em; /* --------------------------------------------------------- 7 · SPACING — 4px base scale --------------------------------------------------------- */ --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.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* --------------------------------------------------------- 8 · RADII --------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; /* --------------------------------------------------------- 9 · SHADOWS & GLOWS --------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow-md: 0 6px 18px rgba(0,0,0,0.35); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.35); --shadow-gold: 0 6px 18px var(--primary-35), var(--shadow-inset); --shadow-gold-lg: 0 8px 30px var(--primary-45), var(--shadow-inset); --glow-gold: 0 0 12px var(--primary-25); --glow-gold-lg: 0 0 18px var(--primary-35); /* --------------------------------------------------------- 10 · LAYOUT METRICS --------------------------------------------------------- */ --container-max: 1200px; --container-pad: var(--space-4); --header-h: 64px; /* --------------------------------------------------------- 11 · MOTION --------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.4s; /* --------------------------------------------------------- 12 · BREAKPOINTS (reference tokens — media queries below must repeat the literals; CSS can't var() a @media) --------------------------------------------------------- */ --bp-sm: 375px; --bp-md: 768px; --bp-lg: 1440px; } /* ============================================================ LIGHT THEME — overrides only the semantic layer. Brand gold stays identical; surfaces & text invert. ============================================================ */ :root[data-theme="light"] { --gray-1: #1a2038; --gray-2: #4a5578; --gray-3: #6b7699; --gray-4: #c3cadf; --gray-5: #eef1fb; --color-bg: #eef1fb; --color-bg-2: #e6ebf9; --color-surface: #ffffff; --color-surface-2: #f4f6fd; --color-surface-3: #eaeefb; --color-elevated: #ffffff; --color-border: color-mix(in srgb, #2a3566 14%, transparent); --color-border-strong: color-mix(in srgb, #2a3566 26%, transparent); --color-text: #141a3a; --color-text-secondary: var(--gray-2); --color-text-muted: var(--gray-3); --color-link: var(--color-primary-deep); --glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(244,246,253,0.8) 100%); --glass-hover: linear-gradient(135deg, #ffffff 0%, #f4f6fd 100%); --glass-line: color-mix(in srgb, #2a3566 16%, transparent); --grad-aurora: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(100,134,214,0.20) 0%, transparent 55%), radial-gradient(ellipse 50% 35% at 85% 10%, rgba(115,103,216,0.14) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 50% 100%, var(--primary-16) 0%, transparent 60%), var(--color-bg); --grad-hero: radial-gradient(ellipse at 0% 0%, rgba(100,134,214,0.30) 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, rgba(115,103,216,0.22) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, var(--primary-35) 0%, transparent 55%), linear-gradient(135deg, #ffffff 0%, #eef2fe 100%); --grad-card: linear-gradient(135deg, #ffffff 0%, #f5f7fe 100%); --grad-card-featured: linear-gradient(135deg, #ffffff 0%, #eef2fe 100%); --grad-glass: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(244,246,253,0.85) 100%); --star-field: none; --grad-brand-text: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary-deep) 100%); --shadow-sm: 0 1px 3px rgba(30,42,90,0.10); --shadow-md: 0 6px 18px rgba(30,42,90,0.12); --shadow-lg: 0 20px 60px rgba(30,42,90,0.18); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); }