/* ============================================================ Atuel Wine House — foundations for the customer-facing site. Tokens copied from docs/atuel-design/tokens/*.css. The back-office keeps the XAVER tokens (xaver.css). Names both systems share (--fg-1, --accent, --dur-fast…) are therefore only redefined inside .theme-atuel, the class on the customer layouts' . Brand swatches carry an atuel/vinho/areia… prefix and are safe at :root, where Tailwind's @theme can reach them. ============================================================ */ :root { /* ---------- Brand palette (brief §6) ---------- */ --atuel-vinho: #8C2027; /* signature: logo, CTA, promos, active */ --atuel-terra: #4A2926; /* secondary titles, deep bands */ --atuel-areia: #D9C3AA; /* alternate backgrounds */ --atuel-agua: #7897A3; /* accent — Río Atuel, focus */ --atuel-papel: #F7F4EE; /* page */ --atuel-carvao: #22201F; /* text + navigation */ --atuel-champagne: #B79A6B; /* discreet premium hairlines */ /* ---------- Derived tints/shades ---------- */ --vinho-700: #721A20; --vinho-600: #8C2027; --vinho-100: #F1E3E1; --terra-900: #3A201E; --areia-200: #E9DCCB; --areia-100: #F0E7DB; --agua-700: #56727D; --agua-100: #E3EAEC; --champagne-300: #D4C19F; --papel-000: #FFFDF9; --carvao-700: #4B4745; --carvao-500: #77716C; --carvao-300: #B5ADA4; --line: #E4DCD0; --line-strong: #CDBFAE; --atuel-success: #4F6B4A; --atuel-warning: #A8762E; --atuel-scrim: rgba(34, 32, 31, .48); --atuel-font-serif: "Cormorant Garamond", "Libre Baskerville", Georgia, serif; --atuel-font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --atuel-shadow-1: 0 1px 2px rgba(74, 41, 38, .06), 0 8px 24px -12px rgba(74, 41, 38, .18); --atuel-shadow-2: 0 2px 6px rgba(74, 41, 38, .08), 0 24px 48px -24px rgba(74, 41, 38, .32); } .theme-atuel { /* ---------- Semantic colour ---------- */ --bg-page: var(--atuel-papel); --bg-alt: var(--atuel-areia); --bg-soft: var(--areia-100); --bg-deep: var(--atuel-terra); --surface-card: var(--papel-000); --surface-raised: var(--papel-000); --fg-1: var(--atuel-carvao); --fg-2: var(--carvao-700); --fg-3: var(--carvao-500); --fg-on-dark: var(--atuel-papel); --fg-brand: var(--atuel-vinho); --fg-heading-2: var(--atuel-terra); --accent: var(--atuel-vinho); --accent-hover: var(--vinho-700); --accent-river: var(--atuel-agua); --accent-gold: var(--atuel-champagne); --border-subtle: var(--line); --border-strong: var(--line-strong); --focus-ring: var(--agua-100); --state-success: var(--atuel-success); --state-warning: var(--atuel-warning); --state-danger: var(--atuel-vinho); --price-old: var(--carvao-500); --overlay-scrim: var(--atuel-scrim); /* ---------- Type ---------- */ --font-serif: var(--atuel-font-serif); /* story / emotion */ --font-sans: var(--atuel-font-sans); /* function / commerce */ --font-body: var(--atuel-font-sans); --font-display: var(--atuel-font-serif); --fs-display: 72px; --lh-display: 1.02; --fs-h1: 52px; --lh-h1: 1.08; --fs-h2: 38px; --lh-h2: 1.12; --fs-h3: 28px; --lh-h3: 1.2; --fs-h4: 22px; --lh-h4: 1.25; --fs-lead: 19px; --lh-lead: 1.6; --fs-body: 15px; --lh-body: 1.65; --fs-small: 13px; --lh-small: 1.5; --fs-eyebrow: 11px; --fs-price: 18px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --tracking-eyebrow: .28em; --tracking-wordmark: .12em; --tracking-button: .18em; --text-display: var(--fw-regular) var(--fs-display)/var(--lh-display) var(--font-serif); --text-h1: var(--fw-regular) var(--fs-h1)/var(--lh-h1) var(--font-serif); --text-h2: var(--fw-regular) var(--fs-h2)/var(--lh-h2) var(--font-serif); --text-h3: var(--fw-medium) var(--fs-h3)/var(--lh-h3) var(--font-serif); --text-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); --text-lead: italic var(--fw-regular) var(--fs-lead)/var(--lh-lead) var(--font-serif); --text-eyebrow: var(--fw-medium) var(--fs-eyebrow)/1.2 var(--font-sans); /* ---------- Spacing, radii, borders ---------- */ --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: 144px; --container: 1240px; --gutter: 32px; --section-y: var(--space-9); --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px; --border-hair: 1px solid var(--border-subtle); --border-gold: 1px solid var(--atuel-champagne); /* ---------- Elevation (warm, only on hover and overlays) ---------- */ --shadow-0: none; --shadow-1: var(--atuel-shadow-1); --shadow-2: var(--atuel-shadow-2); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms; }