/* ============================================================ Tainá Costa Lash Design · site v2 Tokens: paleta, tipografia, escala, motion Direção: editorial premium feminino, luxo escuro com vida ============================================================ */ /* Fontes carregadas via no do HTML (movido do @import para não bloquear render). */ :root { /* ---- Cor: escuros ---- */ --ink-0: #0A0604; --ink-1: #100B07; /* fundo dominante */ --ink-2: #1A130C; /* cards */ --ink-3: #241A11; /* elevado */ --ink-4: #30231A; /* destaque suave */ /* ---- Cor: dourados ---- */ --gold-deep: #6B4A2C; --gold: #9C724C; /* primária declarada da Tainá */ --gold-light: #C9A06A; --gold-bright: #E8C792; /* brilho/seda */ --gold-pale: #F0D9A8; --ember: #CC7E3F; /* accent quente (sutil) */ /* ---- Cor: creme ---- */ --cream: #F4ECDF; --cream-2: #EADFCB; --milk: #FFFBF3; /* ---- Texto ---- */ --txt-on-dark: #F2E8D6; --txt-muted: #B9A88C; --txt-faint: #8A7964; --txt-on-cream: #2A1F14; --txt-cream-mut: #6E5B45; /* ---- Hairlines ---- */ --hair: rgba(232,199,146,.16); --hair-strong: rgba(232,199,146,.34); --hair-cream: rgba(122,86,53,.2); /* ---- Tipografia ---- */ --ff-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --ff-body: 'Inter', system-ui, -apple-system, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-eyebrow: .72rem; --fs-body: 1.0625rem; --fs-small: .9rem; --fs-lead: clamp(1.1rem, 1rem + .5vw, 1.35rem); --fs-h3: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); --fs-h2: clamp(2.3rem, 1.5rem + 3.5vw, 4.4rem); --fs-h1: clamp(2.4rem, 1.4rem + 5.6vw, 6.4rem); --fs-mega: clamp(3.6rem, 1.8rem + 9vw, 11rem); --lh-tight: 0.95; --lh-snug: 1.08; --lh-body: 1.6; --ls-mono: 0.18em; --ls-eyebrow: 0.24em; --ls-display: -0.02em; --ls-mega: -0.045em; /* ---- Espaço ---- */ --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --space-block: clamp(2rem, 1.2rem + 2vw, 3.5rem); --container: 1280px; --container-wide: 1440px; --container-narrow: 760px; --gutter: clamp(1.25rem, .6rem + 3vw, 2.5rem); /* ---- Forma ---- */ --r-xs: 4px; --r-sm: 6px; /* botões quadrados (decisão Renan) */ --r: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* ---- Sombra ---- */ --sh-soft: 0 24px 60px -30px rgba(20,10,4,.75); --sh-gold: 0 18px 50px -20px rgba(156,114,76,.55); --sh-card: 0 32px 80px -40px rgba(20,10,4,.9), 0 8px 24px -12px rgba(107,74,44,.22), inset 0 1px 0 rgba(232,199,146,.06); --sh-deep: 0 60px 140px -50px rgba(20,10,4,.95), 0 18px 50px -25px rgba(156,114,76,.3); /* ---- Motion ---- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-soft: cubic-bezier(.16, 1, .3, 1); --ease-emph: cubic-bezier(.4, 0, .2, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --t-fast: .35s var(--ease-soft); --t-med: .65s var(--ease-soft); --t-slow: 1.2s var(--ease-soft); --t-snap: .28s cubic-bezier(.22, 1, .36, 1); --t-glide: .95s cubic-bezier(.19, 1, .22, 1); --t-silk: 1.4s cubic-bezier(.16, 1, .3, 1); /* ---- Gradientes ---- */ --silk: linear-gradient(115deg, #6B4A2C 0%, #9C724C 22%, #E8C792 48%, #F0D9A8 54%, #C9A06A 70%, #6B4A2C 100%); --silk-soft: linear-gradient(135deg, rgba(232,199,146,0) 0%, rgba(232,199,146,.22) 50%, rgba(232,199,146,0) 100%); --mesh-warm: radial-gradient(900px 700px at 12% 10%, rgba(204,126,63,.18), transparent 65%), radial-gradient(1000px 800px at 95% 30%, rgba(232,199,146,.12), transparent 60%), radial-gradient(700px 600px at 50% 110%, rgba(156,114,76,.16), transparent 60%); --grad-veil: linear-gradient(180deg, rgba(16,11,7,.0) 0%, rgba(16,11,7,.85) 75%, var(--ink-1) 100%); /* ---- Z-index ---- */ --z-loader: 200; --z-cursor: 180; --z-header: 100; --z-float: 80; --z-grain: 90; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; } }