/* ============================================================ SCUP GLOBAL — MASTER DESIGN TOKENS Each brand overrides via [data-brand] on ============================================================ */ :root { --bg-0:#06080F; --bg-1:#090C17; --bg-2:#0C1120; --bg-3:#101829; --text-0:#F0F4FF; --text-1:#8A9AB8; --text-2:#3D4F6B; --border-0:rgba(255,255,255,0.06); --border-1:rgba(255,255,255,0.11); --ff-display:'Space Grotesk',sans-serif; --ff-body:'Inter',sans-serif; --ff-mono:'JetBrains Mono',monospace; --max-w:1140px; --nav-h:70px; --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px; --r-pill:100px; --ease:cubic-bezier(0.22,1,0.36,1); --t-fast:0.18s; --t-med:0.3s; /* Global default — blue-to-mint */ --brand-a:#1B6FFF; --brand-b:#00C4FF; --brand-c:#00E5A0; --brand-glow:rgba(27,111,255,0.18); --brand-border:rgba(27,111,255,0.25); --brand-bg:rgba(27,111,255,0.08); --brand-text:#1B6FFF; } /* LABS — Purple */ [data-brand="labs"]{ --brand-a:#7B4FFF; --brand-b:#9B73FF; --brand-c:#BFA0FF; --brand-glow:rgba(123,79,255,0.18); --brand-border:rgba(123,79,255,0.28); --brand-bg:rgba(123,79,255,0.09); --brand-text:#9B73FF; } /* SYSTEMS — Teal/Cyan */ [data-brand="systems"]{ --brand-a:#1B9FBF; --brand-b:#00D4AA; --brand-c:#00EFC0; --brand-glow:rgba(0,212,170,0.15); --brand-border:rgba(0,212,170,0.25); --brand-bg:rgba(0,212,170,0.08); --brand-text:#00D4AA; } /* CONSULTING — Royal Blue */ [data-brand="consulting"]{ --brand-a:#2B4EAA; --brand-b:#4A72D4; --brand-c:#7098E8; --brand-glow:rgba(43,78,170,0.2); --brand-border:rgba(74,114,212,0.3); --brand-bg:rgba(43,78,170,0.1); --brand-text:#4A72D4; } /* STUDIOS — Monochrome */ [data-brand="studios"]{ --bg-0:#050507; --bg-1:#080809; --bg-2:#0E0E10; --bg-3:#141416; --brand-a:#E0E0E0; --brand-b:#FFFFFF; --brand-c:#AAAAAA; --brand-glow:rgba(255,255,255,0.08); --brand-border:rgba(255,255,255,0.2); --brand-bg:rgba(255,255,255,0.06); --brand-text:#E0E0E0; } /* ACADEMY — Teal Green */ [data-brand="academy"]{ --brand-a:#1A8A7A; --brand-b:#24B89E; --brand-c:#3DD6B8; --brand-glow:rgba(26,138,122,0.18); --brand-border:rgba(36,184,158,0.28); --brand-bg:rgba(26,138,122,0.09); --brand-text:#24B89E; } .grad-text{ background:linear-gradient(135deg,var(--brand-a) 0%,var(--brand-b) 60%,var(--brand-c) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .grad-bg{ background:linear-gradient(135deg,var(--brand-a),var(--brand-b)); }