@layer tokens; @layer tokens { :root { /* ========================================================= 1) BRAND / SEASON ACCENT API (future-proof) --------------------------------------------------------- You will later override ONLY these per season: --accent-1/2/3 + --accent-glow ========================================================== */ --accent-1: hsl(18, 89%, 62%); /* molten orange */ --accent-2: hsl(12, 74%, 54%); /* deeper lava red */ --accent-3: hsl(20, 68%, 42%); /* dark magma */ --accent-glow: hsla(18, 89%, 62%, 0.35); /* Backwards-compatible aliases (so your site doesn’t break) */ --lava-1: var(--accent-1); --lava-2: var(--accent-2); --lava-3: var(--accent-3); --lava-glow: var(--accent-glow); /* Accent gradients */ --border-lava: linear-gradient( to bottom right, var(--accent-1), var(--accent-2), var(--accent-3) ); --text-gradient-lava: linear-gradient( to right, var(--accent-1), var(--accent-2) ); /* ========================================================= 2) LEGACY “YELLOW” TOKENS REMAPPED TO LAVA --------------------------------------------------------- Keeps existing template selectors working. ========================================================== */ --text-gradient-yellow: var(--text-gradient-lava); --bg-gradient-yellow-1: linear-gradient( to bottom right, var(--accent-1) 0%, transparent 55% ); --bg-gradient-yellow-2: linear-gradient( 135deg, var(--accent-1) 0%, transparent 60% ), hsl(240, 2%, 13%); --orange-yellow-crayola: var(--accent-1); /* IMPORTANT: vegas-gold is used for text in your timeline. You wanted it brighter for readability → keep it a “hot lava light” */ --vegas-gold: hsl(18, 95%, 70%); /* ========================================================= 3) NEUTRALS / SURFACES (dark glass theme) ========================================================== */ --smoky-black: hsl(0, 0%, 7%); --eerie-black-1: hsl(240, 2%, 13%); --eerie-black-2: hsl(240, 2%, 12%); --onyx: hsl(240, 1%, 17%); --jet: hsl(0, 0%, 22%); --white-1: hsl(0, 0%, 100%); --white-2: hsl(0, 0%, 98%); --light-gray: hsl(0, 0%, 84%); --light-gray-70: hsla(0, 0%, 84%, 0.7); --bittersweet-shimmer: hsl(0, 43%, 51%); /* ========================================================= 4) BACKGROUND / PANEL GRADIENTS --------------------------------------------------------- Fix: you reference --border-gradient-onyx in multiple places but it wasn’t defined. Now it is. ========================================================== */ /* Glassy panel base gradients */ --bg-gradient-onyx: linear-gradient( to bottom right, hsla(240, 5%, 18%, 0.70) 0%, hsla(240, 5%, 10%, 0.85) 100% ); --bg-gradient-jet: linear-gradient( to bottom right, hsla(240, 4%, 16%, 0.55) 0%, hsla(240, 4%, 8%, 0.00) 100% ); /* Border gradient used by content cards / services / buttons in template */ --border-gradient-onyx: linear-gradient( to bottom right, hsla(240, 2%, 18%, 0.2) 0%, hsla(240, 2%, 10%, 0.2) 100% ); /* ========================================================= 5) TYPOGRAPHY ========================================================== */ --ff-body: "Sora", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ff-display: "Oxanium", "Space Grotesk", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --ff-poppins: var(--ff-body); --fs-1: 24px; --fs-2: 18px; --fs-3: 17px; --fs-4: 16px; --fs-5: 15px; --fs-6: 14px; --fs-7: 13px; --fs-8: 11px; --fw-300: 300; --fw-3: var(--fw-300); --fw-400: 400; --fw-500: 500; --fw-600: 600; /* ========================================================= 6) SHADOWS ========================================================== */ --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25); --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25); --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15); --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25); /* ========================================================= 7) TRANSITIONS ========================================================== */ --transition-1: 0.25s ease; --transition-2: 0.5s ease-in-out; --dust-opacity: 1; --dust-density: 4; /* big jump */ --dust-sway: 1.5; --sparkle-rate: 2.0; /* optional */ --sparkle-brightness: 1.2; /* ========================================================= 8) ========================================================== */ /* ===== Theme Surface API (used by layout/components) ===== */ --base-bg: var(--smoky-black); --surface-1: hsla(240, 5%, 14%, 0.55); --surface-2: hsla(240, 5%, 12%, 0.35); --border-soft: hsla(0, 0%, 100%, 0.14); --text-1: var(--white-2); --text-2: hsla(0, 0%, 92%, 0.75); --card-radius: 26px; --pill-radius: 999px; /* Layout-safe aliases (non-breaking additions) */ --radius-card: var(--card-radius, 26px); --radius-soft: 14px; --radius-pill: var(--pill-radius, 999px); --project-card-radius: 14px; --grid-gap: 24px; --ui-bg: var(--surface-1, rgba(255,255,255,0.06)); --ui-border: var(--border-soft, rgba(255,255,255,0.14)); --ui-shadow: var(--shadow-2, 0 16px 30px rgba(0,0,0,0.25)); /* Project card token API (modular replacement for legacy style.css-only values) */ --project-glass: color-mix(in srgb, var(--base-bg) 92%, var(--accent-3) 8%); --project-glass-hover: color-mix(in srgb, var(--base-bg) 82%, var(--accent-1) 18%); --project-inner: color-mix(in srgb, var(--base-bg) 90%, black); --project-border-thin: color-mix(in srgb, var(--accent-2) 34%, rgba(255,255,255,0.20)); --project-border-thin-hover: color-mix(in srgb, var(--accent-2) 60%, rgba(255,255,255,0.28)); --project-ring-1: color-mix(in srgb, var(--accent-1) 72%, white); --project-ring-2: color-mix(in srgb, var(--accent-2) 40%, transparent); --project-halo-1: color-mix(in srgb, var(--accent-glow) 70%, transparent); --project-halo-2: color-mix(in srgb, var(--accent-glow) 42%, transparent); --project-card-shadow: 0 18px 36px rgba(0,0,0,0.32); --project-card-shadow-hover: 0 22px 48px rgba(0,0,0,0.42); } }