/* ============================================================================
Cazamba Adtech — Design Tokens (CSS custom properties)
Generated from DESIGN.md. Tokens here are the source values; keep in sync.
Usage:
1. Add the font to your :
2. Import this file once: @import "./tokens.css";
3. Reference vars: color: var(--cz-text); background: var(--cz-gradient-aurora);
Theme: dark is the default (on :root). Add data-theme="light" to opt into light.
============================================================================ */
:root {
/* ---- Core brand ---- */
--cz-navy: #15253E;
--cz-navy-700: #0F1C30;
--cz-ink: #0A111F;
--cz-orange: #F38A00; /* action/emphasis — NEVER body text on navy/white; display sizes & fills only */
--cz-orange-alt: #F28900;
--cz-orange-600: #D97700;
--cz-orange-300: #F9A33D;
--cz-white: #FFFFFF;
--cz-black: #000000;
/* ---- Vibrant accent family ---- */
--cz-accent-blue: #0333BE;
--cz-accent-blue-bright: #2D6BFF;
--cz-accent-indigo: #4951CB;
--cz-accent-cyan: #35F3C8;
--cz-accent-teal: #62C9B5;
--cz-accent-magenta: #CB065B;
--cz-accent-lime: #C5E63A;
--cz-accent-lime-bright: #EBF64F;
--cz-accent-red: #D61114;
--cz-accent-violet: #6D28D9; /* spectrum-gradient violet */
--cz-indigo-deep: #1E1B6B; /* aurora-gradient deep indigo */
/* ---- Sub-brand dots ---- */
--cz-brand-creatives: var(--cz-orange);
--cz-brand-engage: var(--cz-accent-indigo);
--cz-brand-tech: var(--cz-accent-blue-bright);
--cz-brand-ops: var(--cz-orange-300);
/* ---- Semantic roles (DARK — default) ---- */
--cz-bg: var(--cz-ink);
--cz-bg-elevated: var(--cz-navy-700);
--cz-surface: var(--cz-navy);
--cz-surface-2: #1B3050;
--cz-surface-glass: rgba(255, 255, 255, 0.06);
--cz-text: #FFFFFF;
--cz-text-muted: #A9B4C6;
--cz-text-subtle: #8A97AD;
--cz-border: rgba(255, 255, 255, 0.12);
--cz-border-strong: rgba(255, 255, 255, 0.24);
--cz-primary: var(--cz-orange);
--cz-on-primary: var(--cz-navy);
--cz-focus: var(--cz-orange);
--cz-link: #5B8CFF; /* brightened for AA on dark surfaces */
--cz-orange-strong: var(--cz-orange); /* key numbers; deepens on light theme */
/* ---- Dark primitives (theme-stable — used where forced-dark context needs a stable ref) ---- */
--cz-neutral-gray-muted: #A9B4C6; /* dark text-muted base; reused by .cz-navbar + .cz-dark-island */
--cz-neutral-gray-subtle: #8A97AD; /* dark text-subtle base */
--cz-dark-border: rgba(255,255,255,.12); /* dark border alpha primitive */
--cz-dark-border-strong: rgba(255,255,255,.24); /* dark border-strong alpha primitive */
--cz-navbar-bg: rgba(10,17,31,.72); /* navbar frosted-glass background */
--cz-focus-glow: rgba(243,138,0,.25); /* orange focus-ring spread color */
/* ---- Data-viz (theme-aware; light-safe overrides in [data-theme="light"]) ---- */
--cz-viz-cyan: var(--cz-accent-cyan);
--cz-viz-teal: var(--cz-accent-teal);
/* Categorical chart series — distinguishable, theme-tuned. Use for MULTI-series
charts; single-metric charts still use one accent (one-accent-per-region). */
--cz-chart-1: #2D6BFF; /* blue */
--cz-chart-2: #FF4D8D; /* magenta */
--cz-chart-3: #35F3C8; /* teal */
--cz-chart-4: #8B92FF; /* indigo */
--cz-chart-5: #B794F6; /* violet */
--cz-chart-6: #C5E63A; /* lime */
/* ---- Status ---- */
--cz-success: #3DCC91;
--cz-info: var(--cz-accent-cyan);
--cz-warning: var(--cz-orange);
--cz-danger: var(--cz-accent-red);
--cz-danger-300: #FF6B6B; /* text-safe danger for legible TEXT/icons on dark navy (~5:1) */
/* ---- Signature gradients ---- */
--cz-gradient-aurora: linear-gradient(120deg, #0A111F 0%, #15253E 32%, #1E1B6B 62%, #2D6BFF 100%);
--cz-gradient-spectrum: linear-gradient(90deg, #F9A33D 0%, #CB065B 30%, #6D28D9 58%, #2D6BFF 82%, #35F3C8 100%);
--cz-gradient-orange: linear-gradient(180deg, #F9A33D 0%, #F38A00 100%);
--cz-glow-orange: radial-gradient(60% 60% at 50% 50%, rgba(243,138,0,0.45) 0%, rgba(243,138,0,0) 70%);
--cz-glow-blue: radial-gradient(60% 60% at 50% 50%, rgba(45,107,255,0.50) 0%, rgba(45,107,255,0) 70%);
/* ---- Typography ---- */
--cz-font-display: "Bai Jamjuree", system-ui, sans-serif;
--cz-font-body: "Poppins", system-ui, sans-serif;
--cz-font-longform: "Open Sans", system-ui, sans-serif;
--cz-text-display-2xl: 700 72px/1.02 var(--cz-font-display);
--cz-text-display-xl: 700 56px/1.05 var(--cz-font-display);
--cz-text-display-lg: 700 40px/1.08 var(--cz-font-display);
--cz-text-heading-lg: 600 30px/1.15 var(--cz-font-display);
--cz-text-heading-md: 600 22px/1.2 var(--cz-font-display);
--cz-text-heading-sm: 600 18px/1.25 var(--cz-font-display);
--cz-text-title: 600 18px/1.4 var(--cz-font-body);
--cz-text-body-lg: 400 18px/1.6 var(--cz-font-body);
--cz-text-body-md: 400 16px/1.6 var(--cz-font-body);
--cz-text-body-sm: 400 14px/1.55 var(--cz-font-body);
--cz-text-longform: 400 16px/1.7 var(--cz-font-longform);
--cz-text-label: 600 13px/1.2 var(--cz-font-display);
--cz-text-caption: 500 12px/1.4 var(--cz-font-body);
--cz-tracking-tight: -0.01em;
--cz-tracking-label: 0.14em;
/* Size-only type scale — for setting font-size alone (the --cz-text-* tokens
above are full `font:` shorthands). 3xs/2xs are micro label/legend steps. */
--cz-fs-3xs: 10px;
--cz-fs-2xs: 11px;
--cz-fs-xs: 12px;
--cz-fs-sm: 13px;
--cz-fs-md: 14px;
--cz-fs-base: 16px;
--cz-fs-lg: 18px;
--cz-fs-xl: 22px;
--cz-fs-2xl: 30px;
--cz-fs-3xl: 40px;
/* ---- Radius ---- */
--cz-rounded-none: 0px;
--cz-rounded-sm: 6px;
--cz-rounded-md: 10px;
--cz-rounded-lg: 16px;
--cz-rounded-xl: 24px;
--cz-rounded-2xl: 32px;
--cz-rounded-pill: 9999px;
/* ---- Icon sizes ---- */
--cz-icon-sm: 16px;
--cz-icon-md: 20px;
--cz-icon-lg: 24px;
/* ---- Spacing (4px base) ---- */
--cz-space-1: 4px;
--cz-space-2: 8px;
--cz-space-3: 12px;
--cz-space-4: 16px;
--cz-space-5: 20px;
--cz-space-6: 24px;
--cz-space-8: 32px;
--cz-space-10: 40px;
--cz-space-12: 48px;
--cz-space-16: 64px;
--cz-space-20: 80px;
--cz-space-24: 96px;
/* ---- Elevation ---- */
--cz-blur-glass: 16px;
--cz-shadow-sm: 0 4px 14px rgba(10, 17, 31, 0.18);
--cz-shadow-lg: 0 10px 30px rgba(10, 17, 31, 0.25);
--cz-shadow-glow-orange: 0 0 40px rgba(243, 138, 0, 0.35);
--cz-shadow-glow-blue: 0 0 60px rgba(45, 107, 255, 0.40);
--cz-shadow-ambient: 0 8px 30px rgba(10, 17, 31, 0.45); /* neutral depth for glass cards (replaces orange halo) */
/* ---- Motion ---- */
--cz-duration-fast: 120ms;
--cz-duration-base: 200ms;
--cz-duration-slow: 320ms;
--cz-duration-slower: 600ms;
--cz-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* decelerate — entrances & most UI */
--cz-ease-in: cubic-bezier(0.4, 0, 1, 1); /* accelerate — exits */
--cz-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--cz-ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot — brand moments */
}
/* ---- Light theme overrides ---- */
[data-theme="light"] {
--cz-bg: #FFFFFF;
--cz-bg-elevated: #F4F6FB;
--cz-surface: #FFFFFF;
--cz-surface-2: #EEF1F7;
--cz-surface-glass: rgba(21, 37, 62, 0.04);
--cz-text: var(--cz-navy);
--cz-text-muted: #51607A;
--cz-text-subtle: #6B7689; /* ~4.6:1 on white (was #8995A8 ~3:1) */
--cz-border: rgba(21, 37, 62, 0.12);
--cz-border-strong: rgba(21, 37, 62, 0.22);
--cz-on-primary: #FFFFFF;
--cz-link: var(--cz-accent-blue); /* #0333BE ~9.4:1 on white */
--cz-focus: #D97700; /* orange-600, ~3.2:1 ring on white */
--cz-orange-strong: #9A5200; /* deep orange for key numbers on white */
--cz-viz-cyan: #0E9E86; /* light-safe cyan for charts (>3:1 on white) */
--cz-viz-teal: #2F9E86;
--cz-danger-300: #C20A0E; /* text-safe danger for legible TEXT/icons on white (~5:1) */
/* Categorical chart series — deeper variants legible on white */
--cz-chart-1: #0333BE; /* blue */
--cz-chart-2: #CB065B; /* magenta */
--cz-chart-3: #0E9E86; /* teal */
--cz-chart-4: #4951CB; /* indigo */
--cz-chart-5: #6D28D9; /* violet */
--cz-chart-6: #5E7A0E; /* lime */
}
/* ----------------------------------------------------------------------------
Reusable dark "island": pins the dark token set (white text, dark surfaces)
regardless of [data-theme], so gradient/glass islands stay legible in light.
Apply .cz-dark-island to any always-dark element.
---------------------------------------------------------------------------- */
.cz-dark-island, [data-theme="light"] .cz-dark-island {
--cz-bg:#0A111F; --cz-surface:#15253E; --cz-surface-2:#1B3050;
--cz-surface-glass:rgba(255,255,255,.06);
--cz-text:#FFFFFF; --cz-text-muted:#A9B4C6; --cz-text-subtle:#8A97AD;
--cz-border:rgba(255,255,255,.12); --cz-border-strong:rgba(255,255,255,.24);
--cz-link:#5B8CFF; --cz-focus:var(--cz-orange); --cz-on-primary:var(--cz-navy);
}
/* ============================================================================
Intensity modes — expressive (marketing, default) vs calm (product).
Set data-mode="product" on a wrapper for daily dashboards/UI;
data-mode="marketing" (or unset) keeps the signature expressive treatment.
Orthogonal to data-theme (dark/light).
============================================================================ */
:root,
[data-mode="marketing"] {
--cz-mode-panel-bg: var(--cz-surface-glass);
--cz-mode-panel-border: var(--cz-border);
--cz-mode-panel-radius: var(--cz-rounded-xl);
--cz-mode-panel-shadow: var(--cz-shadow-ambient); /* cards = neutral depth; orange glow is reserved for the focal CTA (--cz-mode-cta-glow) */
--cz-mode-panel-blur: blur(var(--cz-blur-glass));
--cz-mode-section-bg: var(--cz-gradient-aurora);
--cz-mode-ease: var(--cz-ease-emphasized);
--cz-mode-duration: var(--cz-duration-slow);
--cz-mode-gap: var(--cz-space-6);
--cz-mode-pad: var(--cz-space-8);
--cz-mode-heading-transform: uppercase;
--cz-mode-heading-tracking: var(--cz-tracking-tight);
--cz-mode-cta-glow: var(--cz-shadow-glow-orange);
}
[data-mode="product"] {
--cz-mode-panel-bg: var(--cz-surface);
--cz-mode-panel-border: var(--cz-border);
--cz-mode-panel-radius: var(--cz-rounded-lg);
--cz-mode-panel-shadow: none;
--cz-mode-panel-blur: none;
--cz-mode-section-bg: var(--cz-bg);
--cz-mode-ease: var(--cz-ease-standard);
--cz-mode-duration: var(--cz-duration-base);
--cz-mode-gap: var(--cz-space-4);
--cz-mode-pad: var(--cz-space-5);
--cz-mode-heading-transform: none;
--cz-mode-heading-tracking: 0em;
--cz-mode-cta-glow: none;
}
/* Calm mode silences ambient brand loops and entrance animations. */
[data-mode="product"] .cz-aurora-animated,
[data-mode="product"] .cz-eq-bar,
[data-mode="product"] .cz-glow-pulse,
[data-mode="product"] .cz-rise-in { animation: none !important; }
/* ============================================================================
Motion — keyframes + utilities for the signature animations.
============================================================================ */
@keyframes cz-aurora-drift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes cz-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes cz-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cz-glow-pulse {
0%, 100% { box-shadow: 0 0 0 rgba(243, 138, 0, 0); }
50% { box-shadow: var(--cz-shadow-glow-orange); }
}
/* Aurora: pair with a gradient background; needs a larger background-size to pan. */
.cz-aurora-animated { background-size: 200% 200%; animation: cz-aurora-drift 18s linear infinite; }
.cz-eq-bar { transform-origin: bottom; animation: cz-eq 1.1s var(--cz-ease-in-out) infinite; }
.cz-rise-in { animation: cz-rise-in var(--cz-duration-slow) var(--cz-ease-standard) both; }
.cz-glow-pulse { animation: cz-glow-pulse 2.4s var(--cz-ease-in-out) infinite; }
/* Respect user preference: kill ambient loops, near-instant transitions. */
@media (prefers-reduced-motion: reduce) {
.cz-aurora-animated, .cz-eq-bar, .cz-glow-pulse { animation: none !important; }
.cz-rise-in { animation: none !important; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}