/* ───────────────────────────────────────────────────────────── * Ticketera Wass — Brand tokens · Cerulean Ice * * Import once in your global stylesheet: * @import url("/brand.css"); * * Then reference tokens anywhere: * .btn-primary { background: var(--tw-accent); color: var(--tw-cream); } * ───────────────────────────────────────────────────────────── */ :root { /* ── Accent (Cerulean) ─────────────────────────────────────── */ --tw-accent: #0284c7; /* primary brand color */ --tw-accent-hover: #0369a1; /* darker for :hover */ --tw-accent-active: #075985; /* pressed */ --tw-accent-soft: #d3e6f3; /* tinted backgrounds */ --tw-accent-glow: rgba(2, 132, 199, 0.20); /* halo / shadow */ /* ── Neutrals ──────────────────────────────────────────────── */ --tw-ink: #020e1e; /* dark text + dark bg */ --tw-ink-2: #1a2a3d; /* secondary text */ --tw-ink-3: #4b5b6f; /* tertiary / muted */ --tw-cream: #f6efe3; /* warm cream — light text on dark, ticket fill */ --tw-bg: #eef3f7; /* default page background (light theme) */ --tw-surface: #ffffff; /* cards on light bg */ --tw-border: rgba(2, 14, 30, 0.08); --tw-border-strong: rgba(2, 14, 30, 0.16); /* ── Semantic ──────────────────────────────────────────────── */ --tw-success: #059669; --tw-warning: #d97706; --tw-danger: #dc2626; /* ── Type ──────────────────────────────────────────────────── */ --tw-font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ── Radii / spacing primitives ────────────────────────────── */ --tw-radius-sm: 6px; --tw-radius-md: 10px; --tw-radius-lg: 16px; --tw-radius-xl: 24px; /* ── Shadows ───────────────────────────────────────────────── */ --tw-shadow-sm: 0 1px 2px rgba(2, 14, 30, 0.06); --tw-shadow-md: 0 4px 12px rgba(2, 14, 30, 0.10); --tw-shadow-lg: 0 12px 32px rgba(2, 14, 30, 0.14); --tw-shadow-glow: 0 0 0 4px var(--tw-accent-glow); } /* Optional: dark theme tokens. Wrap your page with `data-theme="dark"` * (e.g. on ) to flip the palette. Comment out if not used. */ [data-theme="dark"] { --tw-bg: var(--tw-ink); --tw-surface: #0a1726; --tw-ink: #f6efe3; /* in dark, "ink" becomes cream */ --tw-ink-2: #cdd6e0; --tw-ink-3: #8a98a7; --tw-border: rgba(255, 255, 255, 0.10); --tw-border-strong: rgba(255, 255, 255, 0.18); } /* Convenience body baseline — drop if your project sets its own. */ body { background: var(--tw-bg); color: var(--tw-ink); font-family: var(--tw-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }