/* ============================================================ VertexStudio — Design Tokens The single source of truth for the brand. Recolor or retype the entire product by editing values here. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── Surfaces (near-black with a cool cast) ── */ --bg: #06060d; --bg-1: #0a0a14; --bg-2: #0f0f1c; --bg-3: #161628; --surface: rgba(255, 255, 255, .026); --surface-2: rgba(255, 255, 255, .045); --surface-3: rgba(255, 255, 255, .07); /* ── Text ── */ --text: #f5f5fb; --text-2: #c2c2d6; --muted: #83839a; --faint: #565670; /* ── Hairlines ── */ --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .22); /* ── Brand accents ── */ --violet: #8b5cf6; --indigo: #6366f1; --blue: #5b8cff; --cyan: #22d3ee; --pink: #e879f9; --emerald: #34d399; --amber: #fbbf24; --rose: #fb7185; /* Brand defaults (fallback) — the live values come from brand.config.json via assets/css/brand.css, which loads right after this file. */ --brand: #8b5cf6; --brand-2: #22d3ee; --on-brand: #ffffff; /* readable text/icon color on brand surfaces */ /* ── Signature gradients ── */ --grad-brand: linear-gradient(120deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%); --grad-brand-soft: linear-gradient(120deg, rgba(139, 92, 246, .9), rgba(34, 211, 238, .8)); --grad-text: linear-gradient(120deg, #ffffff 0%, #d7dbff 40%, #a9b4ff 70%, #7fe7f5 100%); --grad-line: linear-gradient(90deg, transparent, var(--line-2), transparent); /* ── Glows & shadows ── */ --glow-brand: 0 0 0 1px rgba(139, 92, 246, .35), 0 12px 40px -8px rgba(124, 92, 255, .55); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .7); --shadow-card-hover: 0 30px 70px -28px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2); /* ── Radii ── */ --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* ── Layout ── */ --nav-h: 70px; --gutter: clamp(20px, 5vw, 64px); --maxw: 1280px; --maxw-prose: 860px; /* ── Type ── */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Modular type scale (fluid) */ --fs-display: clamp(2.9rem, 1.6rem + 5.6vw, 5.6rem); --fs-h1: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); --fs-h3: clamp(1.15rem, 1rem + .6vw, 1.4rem); --fs-lead: clamp(1.05rem, .98rem + .5vw, 1.25rem); --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .76rem; /* ── Motion ── */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.2, .9, .25, 1.2); /* ── Grain overlay (tiny tiled fractal noise) ── */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* ============================================================ THEMES — configurable site-wide via + . Default (no attribute) = Midnight/Violet. Set/persisted by the theme control in the nav. ============================================================ */ /* ── Light appearance ── */ html[data-theme="light"] { --bg: #f7f8fc; --bg-1: #eef0f7; --bg-2: #ffffff; --bg-3: #e7eaf3; --surface: rgba(12, 14, 34, .028); --surface-2: rgba(12, 14, 34, .05); --surface-3: rgba(12, 14, 34, .08); --text: #0e1020; --text-2: #3b3d52; --muted: #65677e; --faint: #9a9cb2; --line: rgba(12, 14, 34, .10); --line-2: rgba(12, 14, 34, .16); --line-strong: rgba(12, 14, 34, .30); /* gradient text must read on light: start dark, end accent */ --grad-text: linear-gradient(120deg, #16182c 0%, var(--brand) 60%, var(--brand-2) 100%); } /* ── Accent presets (work in both appearances) ── Use html[...] so these beat the server-generated brand.css :root rule. */ html[data-accent="cyan"] { --brand: #06b6d4; --brand-2: #6366f1; --violet: #06b6d4; --indigo: #6366f1; --grad-brand: linear-gradient(120deg, #22d3ee 0%, #38bdf8 45%, #6366f1 100%); } html[data-accent="emerald"] { --brand: #10b981; --brand-2: #22d3ee; --grad-brand: linear-gradient(120deg, #34d399 0%, #10b981 45%, #22d3ee 100%); } html[data-accent="sunset"] { --brand: #fb7185; --brand-2: #f59e0b; --grad-brand: linear-gradient(120deg, #fb7185 0%, #f472b6 45%, #f59e0b 100%); } html[data-accent="cyan"]:not([data-theme="light"]), html[data-accent="emerald"]:not([data-theme="light"]), html[data-accent="sunset"]:not([data-theme="light"]) { --grad-text: linear-gradient(120deg, #ffffff 0%, var(--brand) 65%, var(--brand-2) 100%); }