/* ========================================================= Casa del Puro — Design Tokens Colors, Type, Spacing, Effects ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Italiana&family=Inter:wght@300;400;500;600&display=swap'); :root { /* ---------- COLOR — PRIMARY DARKS ---------- */ --espresso: #1a0f0a; /* deepest, page bg */ --tobacco: #2c1810; /* rich brown, panels */ --tobacco-soft: #3a2218; /* hover lift on dark surfaces */ /* ---------- COLOR — ACCENT GOLDS ---------- */ --gold: #c9a961; /* antique gold — primary accent */ --gold-aged: #b8860b; /* aged brass — pressed / deep */ --gold-soft: #d9be84; /* hover lift on gold */ --gold-line: rgba(201, 169, 97, 0.32); /* hairline dividers */ --gold-glow: rgba(201, 169, 97, 0.18); /* shimmer */ /* ---------- COLOR — NEUTRALS ---------- */ --ivory: #f5f0e8; /* primary fg on dark */ --parchment: #e8dfd0; /* warm secondary fg */ --parchment-mute: #b8ad99; /* tertiary fg, captions */ --parchment-dim: #8a7f6c; /* meta, timestamps */ /* ---------- COLOR — DEEP ACCENT ---------- */ --oxblood: #5c1a1a; /* burgundy — rare emphasis */ --oxblood-deep: #3d1010; /* ---------- COLOR — SEMANTIC ---------- */ --bg: var(--espresso); --bg-panel: var(--tobacco); --bg-elev: var(--tobacco-soft); --fg: var(--ivory); --fg-muted: var(--parchment); --fg-meta: var(--parchment-mute); --fg-dim: var(--parchment-dim); --accent: var(--gold); --accent-deep: var(--gold-aged); --rule: var(--gold-line); /* ---------- COLOR — STRENGTH INDICATOR ---------- */ --strength-on: var(--gold); --strength-off: rgba(201, 169, 97, 0.22); /* ---------- TYPOGRAPHY — FAMILIES ---------- */ --font-display: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif; --font-accent: 'Italiana', 'Playfair Display', serif; /* taglines, monogram */ --font-italic: 'Cormorant Garamond', 'Playfair Display', serif; /* italic quotes */ --font-body: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif; /* ---------- TYPOGRAPHY — SCALE ---------- */ --t-display: clamp(56px, 7vw, 96px); /* hero */ --t-h1: 48px; --t-h2: 34px; --t-h3: 24px; --t-h4: 18px; --t-body: 16px; --t-small: 14px; --t-caps: 12px; /* small-caps category labels */ --t-meta: 11px; /* ---------- TYPOGRAPHY — TRACKING ---------- */ --tr-display: 0.01em; --tr-heading: 0.04em; --tr-caps: 0.28em; /* generous, luxury small-caps */ --tr-body: 0; --tr-button: 0.18em; /* ---------- TYPOGRAPHY — LEADING ---------- */ --lh-tight: 1.08; --lh-display: 1.12; --lh-heading: 1.22; --lh-body: 1.65; --lh-narrative: 1.78; /* storytelling blocks */ /* ---------- SPACING ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* editorial breathing room */ /* ---------- RADII ---------- */ --r-none: 0; --r-1: 2px; /* default — barely-rounded */ --r-2: 4px; /* max */ --r-full: 999px; /* tag pills only */ /* ---------- BORDERS ---------- */ --border-hair: 1px solid var(--gold-line); --border-gold: 1px solid var(--gold); --border-frame: 1px solid rgba(201, 169, 97, 0.45); /* ---------- SHADOWS — soft warm ambient, never harsh ---------- */ --shadow-ambient: 0 1px 0 rgba(201, 169, 97, 0.06) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.55); --shadow-lift: 0 1px 0 rgba(201, 169, 97, 0.10) inset, 0 36px 80px -32px rgba(0, 0, 0, 0.65); --shadow-glow: 0 0 0 1px var(--gold), 0 0 32px -4px var(--gold-glow); /* ---------- MOTION ---------- */ --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-quick: 240ms; --dur-base: 420ms; --dur-slow: 600ms; /* ---------- LAYOUT ---------- */ --container: 1280px; --container-text: 680px; /* narrative / storytelling width */ --gutter: var(--s-7); } /* ========================================================= SEMANTIC TYPE — drop on raw HTML for instant brand styling ========================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--font-display); font-weight: 400; /* serif: weight via design, not bold */ color: var(--fg); margin: 0; } h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: var(--tr-display); } h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } .display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 400; } .eyebrow, .caps { font-family: var(--font-body); font-size: var(--t-caps); letter-spacing: var(--tr-caps); text-transform: uppercase; font-weight: 500; color: var(--accent); } .tagline, .serif-italic { font-family: var(--font-italic); font-style: italic; font-weight: 400; } .monogram { font-family: var(--font-accent); /* Italiana */ letter-spacing: 0.06em; } p, .body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-muted); } .narrative { font-family: var(--font-italic); font-size: 19px; line-height: var(--lh-narrative); color: var(--fg-muted); max-width: var(--container-text); } .meta { font-size: var(--t-meta); color: var(--fg-dim); letter-spacing: 0.06em; text-transform: uppercase; } a { color: var(--fg); text-decoration: none; transition: color var(--dur-base) var(--ease-quiet); } a:hover { color: var(--accent); } hr, .rule { border: 0; border-top: var(--border-hair); margin: var(--s-7) 0; }