/** * QuantoCustaUm.app.br — Design Tokens v1.0 * ───────────────────────────────────────────────────────────────────────── * Single source of truth for colors, typography, spacing, radius, shadows * and transitions. Import once per page: * * * Mirrored in tokens.json for design tooling (Figma / Style Dictionary). * Aliases at the bottom preserve backward compat with older var() names. * ───────────────────────────────────────────────────────────────────────── */ :root { /* ═══════════════════════════════════════════════ COLORS — Brand Accents ═══════════════════════════════════════════════ */ --color-neon-green: #00FF88; /* Primary CTA, active states, neon glow */ --color-neon-green-dim: #00CC6E; /* Hover / scrollbar thumb */ --color-neon-blue: #00D4FF; /* Secondary accent, gradient end */ --color-neon-purple: #9B59FF; /* Premium tier, tertiary accent */ --color-neon-orange: #FF6B35; /* Partner D tag, warm CTA variant */ /* ═══════════════════════════════════════════════ COLORS — Backgrounds ═══════════════════════════════════════════════ */ --color-bg-primary: #080B14; /* Page root background */ --color-bg-secondary: #0D1117; /* Footer, alternate sections */ --color-bg-card: #111827; /* Card surfaces, modals */ --color-bg-card-hover: #1A2236; /* Card hover / active state */ /* ═══════════════════════════════════════════════ COLORS — Borders ═══════════════════════════════════════════════ */ --color-border-subtle: rgba(255, 255, 255, 0.08); /* Default card border */ --color-border-neon: rgba(0, 255, 136, 0.25); /* Active / focus ring */ /* ═══════════════════════════════════════════════ COLORS — Text ═══════════════════════════════════════════════ */ --color-text-primary: #F0F6FF; /* Headings, body copy */ --color-text-secondary: #8B9BB4; /* Descriptions, sub-labels */ --color-text-muted: #4A5568; /* Placeholders, timestamps */ /* ═══════════════════════════════════════════════ TYPOGRAPHY — Families ═══════════════════════════════════════════════ */ --font-display: 'Poppins', system-ui, sans-serif; /* Headings, CTAs, prices */ --font-body: 'Inter', system-ui, sans-serif; /* Body copy, labels */ /* ═══════════════════════════════════════════════ TYPOGRAPHY — Scale (Major Third · ×1.25) Base: 16px (1rem) ═══════════════════════════════════════════════ */ --text-xs: 0.6875rem; /* 11px tags, legal notices */ --text-sm: 0.75rem; /* 12px captions, secondary meta */ --text-base: 0.875rem; /* 14px labels, links */ --text-md: 0.9375rem; /* 15px body copy */ --text-lg: 1rem; /* 16px lead paragraph */ --text-xl: 1.125rem; /* 18px large body, sub-heading */ --text-2xl: 1.1875rem; /* 19px card titles */ --text-3xl: clamp(1.75rem, 4vw, 2.75rem); /* section headings */ --text-hero: clamp(1.75rem, 5vw, 3rem); /* hero h1 */ /* ═══════════════════════════════════════════════ TYPOGRAPHY — Weight ═══════════════════════════════════════════════ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ═══════════════════════════════════════════════ SPACING — 4px base grid ═══════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-25: 100px; /* ═══════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 100px; /* ═══════════════════════════════════════════════ SHADOWS ═══════════════════════════════════════════════ */ --shadow-neon-green: 0 0 20px rgba(0, 255, 136, 0.30), 0 0 60px rgba(0, 255, 136, 0.10); --shadow-neon-blue: 0 0 20px rgba(0, 212, 255, 0.25), 0 0 50px rgba(0, 212, 255, 0.08); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-card-hover: 0 12px 48px rgba(0, 255, 136, 0.08); /* ═══════════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════════ */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.40s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* ═══════════════════════════════════════════════ Z-INDEX SCALE ═══════════════════════════════════════════════ */ --z-base: 1; --z-raised: 10; --z-overlay: 99; --z-navbar: 100; /* ═══════════════════════════════════════════════ ALIASES — backward compat with original var() names These point to the canonical tokens above. Update canonical tokens; aliases follow automatically. ═══════════════════════════════════════════════ */ --neon-green: var(--color-neon-green); --neon-green-dim: var(--color-neon-green-dim); --neon-blue: var(--color-neon-blue); --neon-purple: var(--color-neon-purple); --bg-primary: var(--color-bg-primary); --bg-secondary: var(--color-bg-secondary); --bg-card: var(--color-bg-card); --bg-card-hover: var(--color-bg-card-hover); --border-subtle: var(--color-border-subtle); --border-neon: var(--color-border-neon); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --shadow-neon: var(--shadow-neon-green); --shadow-card: var(--shadow-card); --transition: var(--transition-base); }