/* ============================================================ TOKENS — Parada da Brasa Coal · Ivory · Ember · Brass Heritage Railway × Brazilian Night Bar × Open-fire Gastronomy ============================================================ */ :root { /* -------- COAL (fundo, superfícies) -------- */ --coal-950: oklch(0.08 0.005 60); --coal-900: oklch(0.11 0.006 65); --coal-800: oklch(0.15 0.008 70); --coal-750: oklch(0.19 0.009 70); --coal-700: oklch(0.24 0.010 72); --coal-600: oklch(0.32 0.012 75); /* -------- IVORY / CREAM (texto quente) -------- */ --ivory: oklch(0.93 0.048 92); --ivory-soft: oklch(0.88 0.045 90); --cream: oklch(0.85 0.075 88); --smoke-300: oklch(0.76 0.014 85); --smoke-400: oklch(0.64 0.013 85); --smoke-500: oklch(0.52 0.012 85); --smoke-600: oklch(0.42 0.011 85); /* -------- EMBER (brasa) -------- */ --ember-400: oklch(0.74 0.19 48); --ember-500: oklch(0.66 0.185 41); --ember-600: oklch(0.55 0.180 38); --ember-700: oklch(0.44 0.150 34); --ember-glow: oklch(0.78 0.20 55); /* -------- BRASS (latão envelhecido) -------- */ --brass-400: oklch(0.75 0.09 82); --brass-500: oklch(0.66 0.09 82); --brass-600: oklch(0.56 0.09 82); --brass-700: oklch(0.46 0.08 80); /* -------- Semânticos -------- */ --bg: var(--coal-950); --surface: var(--coal-900); --surface-2: var(--coal-800); --surface-3: var(--coal-750); --line: var(--coal-700); --line-soft: var(--coal-600); --line-strong: var(--brass-700); --ink: var(--ivory); --ink-2: var(--ivory-soft); --ink-warm: var(--cream); --muted: var(--smoke-400); --muted-2: var(--smoke-500); --accent: var(--ember-500); --accent-hi: var(--ember-400); --accent-lo: var(--ember-600); --accent-glow: var(--ember-glow); --accent-ink: var(--coal-950); --brass: var(--brass-500); --brass-hi: var(--brass-400); /* -------- TIPOGRAFIA -------- */ --font-display: 'Barlow Condensed', 'Impact', 'Oswald', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-accent: 'Rye', 'Barlow Condensed', serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --step--2: clamp(0.72rem, 0.68rem + 0.18vw, 0.80rem); --step--1: clamp(0.82rem, 0.78rem + 0.20vw, 0.90rem); --step-0: clamp(0.98rem, 0.94rem + 0.20vw, 1.06rem); --step-1: clamp(1.16rem, 1.08rem + 0.40vw, 1.32rem); --step-2: clamp(1.42rem, 1.28rem + 0.70vw, 1.72rem); --step-3: clamp(1.85rem, 1.55rem + 1.50vw, 2.55rem); --step-4: clamp(2.55rem, 2.05rem + 2.50vw, 3.80rem); --step-5: clamp(3.30rem, 2.55rem + 3.75vw, 5.40rem); --step-6: clamp(4.30rem, 3.15rem + 5.75vw, 7.60rem); /* -------- SPACING -------- */ --space-3xs: clamp(0.30rem, 0.28rem + 0.10vw, 0.36rem); --space-2xs: clamp(0.50rem, 0.46rem + 0.20vw, 0.60rem); --space-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.90rem); --space-s: clamp(1.00rem, 0.92rem + 0.40vw, 1.20rem); --space-m: clamp(1.50rem, 1.35rem + 0.70vw, 1.90rem); --space-l: clamp(2.25rem, 1.95rem + 1.50vw, 3.00rem); --space-xl: clamp(3.50rem, 2.90rem + 3.00vw, 5.50rem); --space-2xl: clamp(5.50rem, 4.50rem + 5.00vw, 9.00rem); /* -------- LAYOUT -------- */ --wrap-max: 1240px; --wrap-pad: clamp(1.15rem, 0.80rem + 1.80vw, 2.00rem); --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-pill: 999px; /* -------- EASING & DURATION -------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1); --dur-fast: 180ms; --dur-med: 420ms; --dur-slow: 700ms; /* -------- LAYERED SHADOWS / GLOWS -------- */ --glow-ember-sm: 0 0 0 1px oklch(0.66 0.185 41 / 0.35), 0 6px 22px oklch(0.66 0.185 41 / 0.28); --glow-ember-md: 0 0 0 1px oklch(0.66 0.185 41 / 0.55), 0 12px 40px oklch(0.66 0.185 41 / 0.35), 0 0 60px oklch(0.66 0.185 41 / 0.20); --shadow-card: 0 1px 0 oklch(1 0 0 / 0.02) inset, 0 12px 32px oklch(0 0 0 / 0.35); /* -------- NOISE (base64 SVG, ultra sutil) -------- */ --noise: url("data:image/svg+xml;utf8,"); }