/* ========================================================================== Cristal Loungewear — tokens Cópia fiel de cristal-loungewear-design-system/project/tokens/*.css (colors, typography, spacing, effects). As fontes são carregadas por no em vez de @import, para não bloquear a renderização. Não altere valores aqui: altere no design system e re-copie. ========================================================================== */ :root { /* — Base palette — */ /* Rosa Iogurte: #D4ADBC (CMYK 10/40/15/0) — rosa-300 é a referência da marca */ --rosa-25: #FBF4F6; --rosa-50: #F7EAEE; --rosa-100: #F0DBE1; --rosa-200: #E3C4CE; --rosa-300: #D4ADBC; --rosa-400: #BE8E9F; --rosa-500: #9E6878; --rosa-600: #7F4F5D; /* Branco Lótus: #FFFFFF puro, com tintas rosadas para as superfícies */ --lotus-0: #FFFFFF; --lotus-50: #FFFFFF; --lotus-100: #FCF7F9; --lotus-200: #F5ECEF; /* Warm neutrals / ink */ --ink-900: #3A2E2C; --ink-700: #544543; --ink-500: #7A6764; --ink-300: #A79290; --ink-200: #DAC7CE; --ink-100: #EDE2E5; /* Accents */ --champagne: #D8C4A9; --sage: #A9B5A2; --whatsapp: #25D366; --whatsapp-ink: #128C4A; /* — Semantic aliases — */ --text-heading: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-onlight-soft: var(--ink-300); --text-on-rosa: var(--ink-900); --text-inverse: var(--lotus-0); --surface-page: var(--lotus-50); --surface-card: var(--lotus-0); --surface-soft: var(--rosa-50); --surface-tint: var(--rosa-100); --surface-deep: var(--rosa-200); --surface-ink: var(--ink-900); --border-hairline: var(--ink-100); --border-soft: var(--rosa-100); --border-strong: var(--ink-200); --accent-primary: var(--rosa-500); --accent-primary-hover: var(--rosa-600); --accent-ornament: var(--champagne); --accent-botanic: var(--sage); --cta-whatsapp: var(--whatsapp); --cta-whatsapp-hover: var(--whatsapp-ink); /* Gradients — always light-to-light */ --gradient-dawn: linear-gradient(180deg, var(--lotus-0) 0%, var(--rosa-50) 45%, var(--rosa-200) 100%); --gradient-veil: linear-gradient(135deg, var(--rosa-100) 0%, var(--lotus-0) 55%, var(--rosa-50) 100%); --gradient-protect: linear-gradient(180deg, rgba(58, 46, 44, 0) 0%, rgba(58, 46, 44, .42) 100%); /* — Typography — */ --font-display: "Italiana", Georgia, serif; --font-body: "Jost", "Helvetica Neue", Arial, sans-serif; --fs-display-xl: clamp(3rem, 7vw, 5.5rem); --fs-display-l: clamp(2.5rem, 5vw, 4rem); --fs-display-m: clamp(2rem, 3.6vw, 3rem); --fs-title: 1.75rem; --fs-subtitle: 1.25rem; --fs-body-l: 1.0625rem; --fs-body: 1rem; --fs-body-s: .9375rem; --fs-caption: .8125rem; --fs-eyebrow: .6875rem; --lh-display: 1.06; --lh-title: 1.2; --lh-body: 1.7; --lh-tight: 1.35; --ls-display: -0.01em; --ls-body: 0.005em; --ls-eyebrow: 0.32em; --ls-button: 0.16em; --fw-light: 300; --fw-thin: 200; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --type-hero: var(--fw-light) var(--fs-display-xl)/var(--lh-display) var(--font-display); --type-section: var(--fw-light) var(--fs-display-m)/var(--lh-title) var(--font-display); --type-card-title: var(--fw-regular) var(--fs-title)/var(--lh-title) var(--font-display); --type-body: var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-body); --type-eyebrow: var(--fw-medium) var(--fs-eyebrow)/1.4 var(--font-body); /* — Space — */ --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: 140px; --section-y: clamp(64px, 10vw, 140px); --gutter: clamp(20px, 5vw, 64px); --measure: 62ch; --container: 1240px; --container-narrow: 760px; /* — Effects — */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --radius-arch: 50% 50% 6px 6px / 32% 32% 4px 4px; --shadow-none: none; --shadow-xs: 0 1px 2px rgba(90, 64, 60, .05); --shadow-sm: 0 2px 10px rgba(90, 64, 60, .06); --shadow-md: 0 10px 30px rgba(90, 64, 60, .08); --shadow-lg: 0 24px 60px rgba(90, 64, 60, .10); --shadow-focus: 0 0 0 3px rgba(158, 104, 120, .28); --border-width: 1px; --border-hair: 1px solid var(--border-hairline); --ease-soft: cubic-bezier(.22, .61, .36, 1); --ease-inout: cubic-bezier(.4, 0, .2, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-reveal: 900ms; --blur-veil: blur(14px); --overlay-scrim: rgba(58, 46, 44, .34); }