/* ========================================================================== Fica com Deus — Design Tokens Electric v2 · sapphire + voltage gold + segment plasma Source of truth: BUSINESSES/fica-com-deus/profile/brand-kit.json Principle: electric, confident, warm — never AI-slop. Segment color is law. ========================================================================== */ :root { /* ---------- Color: Field (Electric Hero / Mode A) ---------- */ --sapphire: #0B1240; /* primary field top, headline ink on light */ --sapphire-deep: #060A26; /* field bottom, darkest bg */ --surface: #0E1743; --surface-2: #131E52; --surface-3: #1B2A66; /* ---------- Color: Signature ---------- */ --gold: #FFC531; /* voltage gold — logo ✦, key emphasis, Book segment */ --gold-hi: #FFE07A; --electric-blue: #2F7BFF; /* Interview segment, links, light-blue source */ --violet: #7C3AFF; /* Reactions segment */ --magenta: #FF3D9A; /* Tribunal segment, hottest CTA */ --lime: #C6FF3D; /* energy pop, badges */ /* ---------- Color: Segment system ---------- */ --seg-interview: #2F7BFF; --seg-book: #FFC531; --seg-reactions: #7C3AFF; --seg-tribunal: #FF3D9A; /* ---------- Color: Light surfaces (Mode B) ---------- */ --cloud: #F4F6FF; --cloud-2: #E7ECFA; --ig-blue-tint: #EAF2FF; --powder: #D8E7F6; --powder-2: #C6DBF1; --powder-hi: #EEF5FF; --card-white: #FFFFFF; /* ---------- Color: Text ---------- */ --on-dark: #EAF0FF; /* body on the field */ --on-dark-dim: #A6B0D8; --on-dark-muted: #737EA8; --ink: #0B1240; /* sapphire headings on light */ --ink-body: #2C3560; --ink-muted: #65708F; --ink-dim: #3A416B; --slate: #7C86A8; /* muted on light */ --white: #FFFFFF; /* ---------- Color: Borders ---------- */ --border-hairline: rgba(234, 240, 255, 0.08); --border-subtle: rgba(234, 240, 255, 0.14); --border-emphasis: rgba(234, 240, 255, 0.26); --border-gold: rgba(255, 197, 49, 0.45); --border-ink: rgba(11, 18, 64, 0.10); --gold-ink: #B57E00; /* ---------- Gradients ---------- */ --grad-electric-field: linear-gradient(180deg, #0B1240 0%, #060A26 100%); --grad-ig-light: linear-gradient(160deg, #EAF2FF 0%, #F4F8FF 45%, #FFFFFF 100%); --grad-volt: linear-gradient(100deg, #2F7BFF 0%, #7C3AFF 52%, #FF3D9A 100%); --grad-volt-soft: linear-gradient(100deg, #2F7BFF22 0%, #7C3AFF22 52%, #FF3D9A22 100%); --grad-gold: linear-gradient(100deg, #FFB01F 0%, #FFC531 45%, #FFE07A 100%); --grad-chrome: linear-gradient(180deg, #FFFFFF 0%, #DCE4FF 42%, #93A2D8 100%); --grad-hero-floor: radial-gradient(ellipse 90% 55% at 50% 6%, rgba(47,123,255,0.16) 0%, transparent 62%); --grad-vignette: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 46%, rgba(6,10,38,0.72) 100%); /* ---------- Aurora / plasma blooms (elite-web-effects contract) ---------- */ --aurora-base: #0B1240; --aurora-1: rgba(47,123,255,0.55); /* electric blue */ --aurora-2: rgba(124,58,255,0.50); /* violet */ --aurora-3: rgba(255,61,154,0.42); /* magenta */ --aurora-4: rgba(255,197,49,0.28); /* gold spark */ /* ---------- Typography ---------- */ --font-display: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif; --font-impact: 'Archivo', ui-sans-serif, -apple-system, sans-serif; /* eyebrows / kickers */ --font-body: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif; --fs-mega: clamp(2.7rem, 6.4vw, 6rem); /* hero display */ --fs-hero: clamp(2.7rem, 6vw, 5.5rem); --fs-h1: clamp(2.3rem, 4.6vw, 4rem); --fs-h2: clamp(1.9rem, 3.4vw, 3rem); --fs-h3: clamp(1.35rem, 2vw, 1.7rem); --fs-h4: clamp(1.1rem, 1.5vw, 1.25rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem); --fs-body-lg: 1.1rem; --fs-body: 1rem; --fs-body-sm: 0.9375rem; --fs-caption: 0.8125rem; --fs-eyebrow: 0.78rem; --lh-tight: 0.98; --lh-snug: 1.12; --lh-normal: 1.5; --lh-relaxed: 1.68; --track-tight: -0.01em; --track-snug: -0.01em; --track-wide: 0.06em; --track-wider: 0.16em; /* ---------- Spacing (4pt) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px; /* ---------- Radius ---------- */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px; /* ---------- Elevation ---------- */ --shadow-soft: 0 10px 30px -14px rgba(6,10,38,0.7); --shadow-elev: 0 26px 70px -24px rgba(6,10,38,0.82); --shadow-deep: 0 46px 110px -34px rgba(4,7,26,0.95); --shadow-inset: inset 0 0 0 1px var(--border-hairline); --shadow-card: 0 24px 60px -30px rgba(11,18,64,.45); /* ---------- Glow (segment-aware — used on hover + key accents) ---------- */ --glow-blue: 0 0 0 1px rgba(47,123,255,0.35), 0 16px 50px -12px rgba(47,123,255,0.55); --glow-gold: 0 0 0 1px rgba(255,197,49,0.40), 0 16px 50px -12px rgba(255,197,49,0.50); --glow-violet: 0 0 0 1px rgba(124,58,255,0.35), 0 16px 50px -12px rgba(124,58,255,0.55); --glow-magenta: 0 0 0 1px rgba(255,61,154,0.40), 0 18px 56px -12px rgba(255,61,154,0.60); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); --d-instant: 80ms; --d-fast: 160ms; --d-ui: 240ms; --d-reveal: 560ms; --d-hero: 950ms; --d-intro: 1400ms; /* ---------- Layout ---------- */ --container: min(1240px, 100% - 44px); --container-wide: min(1440px, 100% - 36px); --container-read: min(760px, 100% - 44px); --section-y: clamp(52px, 8vh, 104px); --nav-h: 72px; /* ---------- Z-index ---------- */ --z-behind: -1; --z-base: 0; --z-content: 1; --z-sticky: 40; --z-nav: 50; --z-cursor: 90; --z-modal: 100; --z-intro: 300; } /* Honor reduced motion globally */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 0ms; --d-fast: 0ms; --d-ui: 0ms; --d-reveal: 0ms; --d-hero: 0ms; --d-intro: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }