/* ============================================================ Tabacaria Central — Design System Colors + Type tokens ------------------------------------------------------------ Vibe: traditional Brazilian tabacaria, old-world apothecary, hand-painted gold signage, mahogany shelves, sepia, velvet. ============================================================ */ /* -------- Webfonts (Google substitutes) -------- Substitutions, flagged in README: - "Cinzel" → for big incised display caps (substitute for ornate engraved caps in logo) - "Cinzel Decorative" → for the most ornate hero lockups (substitute for filigreed CENTRAL lockup) - "Cormorant Garamond"→ classic body serif (substitute for refined didone serif in subtitles) - "Cormorant SC" → small caps body / metadata - "Pinyon Script" → flourished script accents (substitute for "Desde 2006" type curls) - "IBM Plex Mono" → receipts, prices, codes, dates */ /* As webfonts agora são carregadas via + no do HTML (ver build.js e dev.html). Carregá-las por @import AQUI atrasava a primeira pintura: o navegador só descobria as fontes depois de baixar e ler este CSS. */ :root { /* ------------------------------------------------------------ COLORS — Core palette The deck is mostly DARK with antique-gold accents and parchment text. There is a forest-green "loja" sub-palette pulled from the storefront awning. ------------------------------------------------------------ */ /* Base — blacks & inks (the velvet / mahogany backdrop) */ --noir: #0B0805; /* deepest void, behind the gold logo */ --ink: #14100B; /* primary app background */ --ink-2: #1E1812; /* card / panel background */ --ink-3: #2A211A; /* hover surface / inset */ --ink-4: #3A2E23; /* borders on dark surfaces */ /* Tabaco / Mogno — brown range (wood, leaf, sepia) */ --tabaco-1: #6B4A2E; /* tobacco light */ --tabaco-2: #4D341F; /* tobacco mid (cigar wrapper) */ --tabaco-3: #3D2A1A; /* tobacco deep */ --mogno: #5A2E1F; /* mahogany shelf */ --mogno-deep: #3E1E14; /* mahogany deep */ /* Ouro — the antique-gold spine of the brand */ --ouro-pale: #E8C77B; /* highlight gold (logo serifs) */ --ouro: #C8A663; /* primary gold (rules, ornament) */ --ouro-deep: #9C7A3C; /* shadowed gold */ --ouro-antigo: #B8915A; /* antique brass */ /* Pergaminho — parchments and ivory text */ --pergaminho: #EDE0BD; /* primary cream / "paper" */ --pergaminho-2: #F5EAD2; /* lighter parchment */ --marfim: #F8F1E0; /* ivory (headline on dark) */ --niebla: #D9CCA8; /* faded parchment */ /* Veludo — burgundy & oxblood (premium / sale accents) */ --veludo: #6B1F1F; /* burgundy velvet */ --veludo-deep: #3E0F0F; /* deep oxblood */ --rubi: #8A2530; /* sale tag red */ /* Verde Tabaco — storefront / certified / "fresco" */ --verde-fundo: #1F3A2E; /* awning dark green */ --verde-mid: #2D5440; /* mid green */ --verde-claro: #5B8769; /* tobacco-leaf green */ /* Cobre — copper accents (lighters, knobs) */ --cobre: #B87333; --cobre-pale: #D9985A; /* ------------------------------------------------------------ SEMANTIC COLOR TOKENS — use these in components. ------------------------------------------------------------ */ --bg: var(--ink); --bg-elevated: var(--ink-2); --bg-sunken: var(--noir); --bg-paper: var(--pergaminho); --bg-paper-2: var(--pergaminho-2); --fg: var(--marfim); /* primary text on dark */ --fg-2: var(--pergaminho); /* secondary text on dark */ --fg-3: var(--niebla); /* tertiary / muted */ --fg-on-paper: var(--noir); /* primary on parchment */ --fg-on-paper-2: var(--tabaco-3); /* secondary on parchment */ --accent: var(--ouro); /* primary brand accent */ --accent-pale: var(--ouro-pale); --accent-deep: var(--ouro-deep); --danger: var(--rubi); --success: var(--verde-claro); --premium: var(--veludo); --line: rgba(200,166,99,0.28); /* gold hairline on dark */ --line-strong: rgba(200,166,99,0.55); --line-paper: rgba(58,46,35,0.20); /* on parchment */ /* ------------------------------------------------------------ TYPOGRAPHY — Base ------------------------------------------------------------ */ --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; --font-ornate: 'Cinzel Decorative', 'Cinzel', serif; --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-smallcaps: 'Cormorant SC', 'Cinzel', serif; --font-script: 'Pinyon Script', 'Snell Roundhand', cursive; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Scale — generous, editorial */ --size-hero: clamp(56px, 9vw, 128px); --size-h1: 56px; --size-h2: 40px; --size-h3: 28px; --size-h4: 22px; --size-lg: 18px; --size-body: 16px; --size-sm: 14px; --size-xs: 12px; --size-eyebrow: 11px; --lh-tight: 1.05; --lh-snug: 1.20; --lh-normal: 1.45; --lh-loose: 1.65; --ls-display: 0.06em; --ls-smallcaps: 0.18em; --ls-eyebrow: 0.32em; --ls-body: 0.00em; /* ------------------------------------------------------------ SPACING — base 4 ------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ------------------------------------------------------------ RADII — restrained. Tabacaria leans on RECTANGLES, GOLD HAIRLINES, and ORNAMENT — not on rounded UI chrome. ------------------------------------------------------------ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ------------------------------------------------------------ SHADOWS — warm, candle-lit, no flat-design blue tones. ------------------------------------------------------------ */ --shadow-1: 0 1px 0 rgba(255,225,170,0.04) inset, 0 1px 3px rgba(0,0,0,0.4); --shadow-2: 0 1px 0 rgba(255,225,170,0.06) inset, 0 8px 22px rgba(0,0,0,0.55); --shadow-3: 0 1px 0 rgba(255,225,170,0.08) inset, 0 24px 60px -10px rgba(0,0,0,0.7); --shadow-gold-glow: 0 0 0 1px rgba(200,166,99,0.4), 0 0 22px rgba(200,166,99,0.25); --shadow-inset-vignette: inset 0 0 120px rgba(0,0,0,0.55); /* Verde-veludo atmosphere: a *very* low-opacity forest-green tint used as a backdrop wash on hero/showcase sections so the brand feels luxurious — the green pulled from the storefront awning. */ --verde-veludo-wash: radial-gradient(120% 80% at 50% 0%, rgba(45, 84, 64, 0.32) 0%, rgba(31, 58, 46, 0.18) 38%, rgba(11, 8, 5, 0.0) 72%), var(--ink); --verde-veludo-deep: radial-gradient(140% 100% at 50% 50%, rgba(31, 58, 46, 0.55) 0%, rgba(11, 8, 5, 0.85) 70%), var(--noir); /* ------------------------------------------------------------ BORDERS / RULES — gold hairlines are signature ------------------------------------------------------------ */ --rule-thin: 1px solid var(--line); --rule: 1px solid var(--line-strong); --rule-gold: 1px solid var(--ouro); --rule-double: 3px double var(--ouro); /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.6,.0,.2,1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ------------------------------------------------------------ Pair with the *base* element OR use as utility classes:

,

, etc. ============================================================ */ .display, .h-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--size-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; } .ornate { font-family: var(--font-ornate); font-weight: 700; letter-spacing: var(--ls-display); text-transform: uppercase; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--size-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--size-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-display); text-transform: uppercase; } h3, .h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-h3); line-height: var(--lh-snug); letter-spacing: 0.01em; } h4, .h4 { font-family: var(--font-smallcaps); font-weight: 600; font-size: var(--size-h4); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; } .eyebrow { font-family: var(--font-smallcaps); font-size: var(--size-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--accent); } .script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; text-transform: none; } p, .body { font-family: var(--font-serif); font-size: var(--size-body); line-height: var(--lh-loose); color: var(--fg-2); } .lead { font-family: var(--font-serif); font-size: var(--size-lg); line-height: var(--lh-loose); font-style: italic; color: var(--fg-2); } .smallcaps { font-family: var(--font-smallcaps); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; } .meta, small { font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--accent-pale); } /* Gold hairline rule used everywhere */ .rule-gold { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro) 20%, var(--ouro) 80%, transparent); } .rule-double-gold { border: 0; height: 6px; border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro); } /* "Filigree" ornamental separator — three small diamonds */ .ornament-divider { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ouro); font-size: 8px; } .ornament-divider::before, .ornament-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro)); } .ornament-divider::after { background: linear-gradient(90deg, var(--ouro), transparent); }