/* ===================================================================== CreativEdge — Design Tokens Source: brand reference (Jul 2026). Drop into Phase 1 frontend. These same values are stored in `settings` (group=branding) so they stay editable from the dashboard without touching CSS. ===================================================================== */ /* Font loading — add to : Satoshi: https://api.fontshare.com/v2/css?f[]=satoshi@700,900&display=swap Inter: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap */ :root { /* ---- Core palette (exact hex from reference) ---- */ --deep-midnight: #050B16; /* primary background */ --dark-navy: #0F172A; /* raised surfaces / sections */ --electric-blue: #246BFD; /* PRIMARY — CTAs, links, hover ⚠ confirm exact hex */ --ice-cyan: #66E8FF; /* secondary accent / glows */ --acid-lime: #C0FF00; /* bold accent — use sparingly */ --white: #FFFFFF; /* ---- Semantic roles ---- */ --bg: var(--deep-midnight); --surface: var(--dark-navy); --primary: var(--electric-blue); --secondary: var(--ice-cyan); --accent: var(--acid-lime); --text: #E6EEFB; --text-muted: #93A4C0; --border: rgba(255, 255, 255, 0.08); /* ---- Gradients (from reference) ---- */ --gradient-01: linear-gradient(90deg, #246BFD 0%, #66E8FF 100%); --gradient-02: linear-gradient(90deg, #1E40AF 0%, #66E8FF 100%); /* ---- Typography ---- */ --font-head: 'Satoshi', sans-serif; /* Bold headlines */ --font-body: 'Inter', sans-serif; /* Regular body */ --fw-hero: 900; --fw-head: 700; --fw-body: 400; /* ---- Radius / glow ---- */ --radius: 14px; --glow-blue: 0 0 40px rgba(36, 107, 253, 0.35); --glow-cyan: 0 0 40px rgba(102, 232, 255, 0.30); } /* ---- Base usage ---- */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: var(--fw-body); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-head); color: var(--white); } .hero-title { font-weight: var(--fw-hero); } a { color: var(--primary); text-decoration: none; } .btn-primary { background: var(--primary); color: var(--white); border-radius: var(--radius); box-shadow: var(--glow-blue); } .text-gradient { background: var(--gradient-01); -webkit-background-clip: text; background-clip: text; color: transparent; }