/* ============================================================= Indicalar — Brand Tokens · v1 · 21 mai 2026 Production-ready CSS custom properties. Drop this in landing/styles/tokens.css and import once. ============================================================= */ :root { /* ── Ink & paper ─────────────────────────────────────────── */ --indicalar-ink: oklch(18% 0.01 45); --indicalar-ink-2: oklch(34% 0.01 50); /* secondary text */ --indicalar-ink-3: oklch(55% 0.01 60); /* muted / meta */ --indicalar-paper: oklch(97.5% 0.006 80); --indicalar-paper-2: oklch(94% 0.008 75); /* cards, hover */ --indicalar-white: #ffffff; --indicalar-line: color-mix(in oklch, var(--indicalar-ink) 14%, transparent); --indicalar-line-strong: color-mix(in oklch, var(--indicalar-ink) 30%, transparent); /* ── Brasa (accent — the bracket color) ──────────────────── */ --indicalar-brasa: oklch(62% 0.16 55); --indicalar-brasa-deep: oklch(46% 0.18 40); /* hover, on cream */ --indicalar-brasa-tint: oklch(94% 0.04 60); /* promo zone bg */ --indicalar-brasa-hi: oklch(82% 0.12 65); /* brackets on dark*/ /* ── Deep (the dark mode) ────────────────────────────────── */ --indicalar-deep: oklch(22% 0.03 50); --indicalar-deep-2: oklch(28% 0.025 55); /* ── Petróleo (contraponto frio — Telegram, colabs) ──────── */ --indicalar-petroleo: oklch(48% 0.06 215); /* ── Sub-verticais (chips/badges apenas) ─────────────────── */ --sv-cozinha-bg: oklch(89% 0.05 55); --sv-cozinha-fg: oklch(38% 0.09 45); --sv-tech-bg: oklch(89% 0.04 235); --sv-tech-fg: oklch(38% 0.07 240); --sv-casa-bg: oklch(89% 0.04 155); --sv-casa-fg: oklch(36% 0.07 160); --sv-mob-bg: oklch(89% 0.05 320); --sv-mob-fg: oklch(38% 0.09 330); /* ── Tipografia ──────────────────────────────────────────── */ --indicalar-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --indicalar-mono: "JetBrains Mono", "Inconsolata", ui-monospace, "SF Mono", monospace; --indicalar-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --indicalar-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* promo mode only */ /* ── Espaçamento ─────────────────────────────────────────── */ --indicalar-space-1: 4px; --indicalar-space-2: 8px; --indicalar-space-3: 12px; --indicalar-space-4: 16px; --indicalar-space-5: 24px; --indicalar-space-6: 32px; --indicalar-space-7: 48px; --indicalar-space-8: 64px; /* ── Radii ───────────────────────────────────────────────── */ --indicalar-radius-sm: 4px; --indicalar-radius: 8px; --indicalar-radius-lg: 12px; --indicalar-radius-xl: 16px; --indicalar-radius-pill: 999px; /* ── Sombra ──────────────────────────────────────────────── */ --indicalar-shadow-editorial: 0 1px 0 color-mix(in oklch, var(--indicalar-ink) 4%, transparent), 0 1px 3px color-mix(in oklch, var(--indicalar-ink) 6%, transparent); --indicalar-shadow-promo-1: 0 1px 0 color-mix(in oklch, var(--indicalar-ink) 4%, transparent), 0 4px 14px color-mix(in oklch, var(--indicalar-brasa) 28%, transparent); --indicalar-shadow-promo-2: 0 1px 0 color-mix(in oklch, var(--indicalar-ink) 4%, transparent), 0 8px 26px color-mix(in oklch, var(--indicalar-brasa) 40%, transparent); } /* ── Dark zone (apply to or
on /promos) ───── */ [data-zone="promo-dark"] { --indicalar-paper: var(--indicalar-deep); --indicalar-paper-2: var(--indicalar-deep-2); --indicalar-ink: var(--indicalar-white); --indicalar-ink-2: color-mix(in oklch, var(--indicalar-white) 80%, transparent); --indicalar-ink-3: color-mix(in oklch, var(--indicalar-white) 55%, transparent); --indicalar-brasa: var(--indicalar-brasa-hi); --indicalar-line: color-mix(in oklch, var(--indicalar-white) 10%, transparent); } /* ── Cream zone (apply to /promos hero, banners) ───────────── */ [data-zone="promo-cream"] { --indicalar-paper: var(--indicalar-brasa-tint); }