/* ============================================================ WEBSITE CREATOR — tokens.css The design-token foundation. components.css, brands.css and any page you build read these variables, so you reskin an entire site by editing tokens (or applying a brand kit) — never by hand-picking colors/spacing per element. ------------------------------------------------------------ LOAD ORDER: tokens.css -> backgrounds.css -> components.css (-> brands.css last, so a brand can override tokens) THEME: (default) or "light" BRAND: ============================================================ */ :root{ /* fonts — use the nice face IF installed locally, else fall back (no CDN) */ --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,'Courier New',monospace; --serif:'Playfair Display',Georgia,'Times New Roman',serif; /* fluid type scale (clamp: min … max) */ --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem); --h3:clamp(1.4rem,1.2rem + 1vw,1.9rem); --h2:clamp(1.9rem,1.5rem + 2vw,2.9rem); --h1:clamp(2.6rem,1.9rem + 3.4vw,4.4rem); --lead:clamp(1.05rem,1rem + .4vw,1.3rem); /* spacing scale */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-8:3rem; --sp-10:4rem; --sp-12:6rem; /* radius */ --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* layout */ --maxw:1200px; --maxw-narrow:760px; --gutter:clamp(18px,4vw,40px); /* brand accents (default = the kit's neon identity; brands.css overrides) */ --brand:#00e5ff; --brand-2:#a855f7; --accent:#ff2d95; --on-brand:#04121a; --brand-grad:linear-gradient(92deg,var(--brand),var(--brand-2) 55%,var(--accent)); /* motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s; } /* ---------- DARK theme (default) ---------- */ :root,:root[data-theme="dark"]{ --bg:#07070c; --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.08); --panel:rgba(12,12,20,.72); --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.2); --text:#c9ccdb; --heading:#eef1ff; --muted:#8489a0; --code:#6fe3ff; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55); --shadow-glow:0 0 34px rgba(0,229,255,.16); color-scheme:dark; } /* ---------- LIGHT theme ---------- */ :root[data-theme="light"]{ --bg:#eef1f8; --surface:rgba(255,255,255,.7); --surface-2:rgba(20,30,60,.05); --panel:rgba(255,255,255,.82); --border:rgba(20,30,60,.12); --border-strong:rgba(20,30,60,.22); --text:#3a4055; --heading:#141826; --muted:#6b7186; --code:#0a6f93; --shadow-sm:0 1px 3px rgba(60,80,160,.12); --shadow:0 12px 30px rgba(60,80,160,.14); --shadow-lg:0 26px 60px rgba(60,80,160,.18); --shadow-glow:0 12px 34px rgba(120,80,200,.18); color-scheme:light; }