/* * DEAREST — Design Tokens * Todas as custom properties do sistema de design. * Nunca use valores de cor ou espaçamento hardcoded. * Fontes: incluir no do HTML — * */ :root { /* ─── Paleta Base ─────────────────────────────── */ --obsidian: #0C0A0F; --midnight: #130F1A; --deep-rose: #1A0D14; /* ─── Cores Primárias ─────────────────────────── */ --crimson: #C41E3A; --crimson-dark: #8B0A24; --rose-gold: #B76E79; --champagne: #F5E6C8; --ivory: #FAF7F2; /* ─── Acentos ─────────────────────────────────── */ --gold: #D4AF37; --gold-dark: #B8860B; --gold-light: #F0D080; --blush: #FFAEC0; /* ─── Superfícies Glass ───────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.20); --glass-hover: rgba(255, 255, 255, 0.07); --glass-active: rgba(255, 255, 255, 0.10); /* ─── Tipografia ──────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-head: 'Playfair Display', 'DM Serif Display', Georgia, serif; --font-body: 'Lora', Georgia, serif; --font-ui: 'Outfit', sans-serif; /* ─── Escala de Fonte ─────────────────────────── */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 42px; --text-4xl: 56px; --text-hero: 72px; /* ─── Line Heights ────────────────────────────── */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; --leading-loose: 2.0; /* ─── Letter Spacing ──────────────────────────── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.18em; /* ─── Motion — Easings ────────────────────────── */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-silk: cubic-bezier(0.4, 0, 0.2, 1); --ease-drift: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56); /* ─── Motion — Durations ──────────────────────── */ --dur-instant: 80ms; --dur-fast: 180ms; --dur-med: 380ms; --dur-slow: 680ms; --dur-xslow: 1100ms; --dur-breath: 3200ms; /* ─── Espaçamentos ────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ─── Border Radius ───────────────────────────── */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 9999px; /* ─── Sombras ─────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.6); --shadow-gold: 0 0 24px rgba(212, 175, 55, 0.30); --shadow-gold-lg: 0 0 48px rgba(212, 175, 55, 0.25); --shadow-crimson: 0 0 24px rgba(196, 30, 58, 0.40); --shadow-crimson-lg: 0 0 48px rgba(196, 30, 58, 0.35); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ─── Tamanhos de Toque (mobile) ──────────────── */ --touch-min: 44px; --touch-md: 52px; --touch-lg: 60px; /* ─── Z-Index ─────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-top: 999; /* ─── Layout ──────────────────────────────────── */ --content-max: 1200px; --page-max: 680px; --wizard-max: 960px; --sidebar-width: 360px; --page-padding: clamp(16px, 5vw, 32px); /* ─── Tema padrão (Eternal) — sobrescrito por [data-theme] ── */ --theme-bg: linear-gradient(160deg, var(--obsidian) 0%, var(--deep-rose) 50%, var(--obsidian) 100%); --theme-card: rgba(26, 13, 20, 0.92); --theme-accent: var(--gold); --theme-text: var(--ivory); --theme-sub: var(--rose-gold); --theme-orb1: rgba(196, 30, 58, 0.28); --theme-orb2: rgba(183, 110, 121, 0.18); --theme-border: rgba(212, 175, 55, 0.15); /* ─── 2026 Premium Palette ────────────────────── */ --hot-rose: #FF4D7A; --hot-rose-dark: #E8395D; --hot-rose-light: #FF85A1; --deep-wine: #180D14; --velvet: #2D0A1E; --velvet-light: #3D1028; /* ─── Gradient Presets ────────────────────────── */ --grad-primary: linear-gradient(135deg, var(--hot-rose-dark) 0%, var(--crimson) 50%, var(--crimson-dark) 100%); --grad-gold: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 40%, var(--gold-light) 70%, var(--gold) 100%); --grad-rose: linear-gradient(135deg, var(--hot-rose) 0%, var(--hot-rose-dark) 50%, var(--crimson) 100%); --grad-glass-rose: linear-gradient(135deg, rgba(232,57,93,0.12) 0%, rgba(196,30,58,0.06) 100%); --grad-hero: radial-gradient(ellipse at 30% 40%, rgba(232,57,93,0.18) 0%, transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(212,175,55,0.10) 0%, transparent 50%), radial-gradient(ellipse at 50% 0%, rgba(139,10,36,0.22) 0%, transparent 60%); /* ─── Glass Premium ───────────────────────────── */ --glass-rose: rgba(232, 57, 93, 0.08); --glass-rose-border: rgba(232, 57, 93, 0.20); --glass-gold-border: rgba(212, 175, 55, 0.22); /* ─── Grain texture (SVG noise inline) ────────── */ --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); /* ─── Sombras Premium ─────────────────────────── */ --shadow-rose: 0 0 24px rgba(232, 57, 93, 0.35); --shadow-rose-lg: 0 0 48px rgba(232, 57, 93, 0.25), 0 8px 32px rgba(139, 10, 36, 0.4); --shadow-card: 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3); /* ─── Cores Semânticas de Texto ───────────────── */ --text-primary: var(--ivory); /* #FAF7F2 */ --text-secondary: rgba(250, 247, 242, 0.70); --text-subtle: rgba(250, 247, 242, 0.45); --text-muted: rgba(250, 247, 242, 0.48); /* 0.48 = ~5.4:1 em #0C0A0F — WCAG AA */ }