/**
 * Converzaq landing design tokens — aliases of the unified system.
 * Source of truth: docs/design/CONVERZAQ_DESIGN_SYSTEM.md + styles/design-tokens.css
 *
 * These `--cz-*` variables are available on `/` for overrides.
 * Do not invent a second palette here.
 */

:root {
  /* ——— Brand / color ——— */
  --cz-color-primary: #0058e0;
  --cz-color-primary-hover: #0046b8;
  --cz-color-primary-active: #003a9a;
  --cz-color-primary-soft: #e8f0fc;
  --cz-color-primary-tint: #d6e6fb;
  --cz-color-primary-border: #c5d9f7;
  --cz-color-ink: #1a1c20;
  --cz-color-text: #292a2e;
  --cz-color-text-secondary: #505258;
  --cz-color-text-muted: #8c8f97;
  --cz-color-white: #ffffff;
  --cz-color-bg: #f5f6f8;
  --cz-color-bg-subtle: #f8f8f8;
  --cz-color-surface: #ffffff;
  --cz-color-border: #e4e2e7;
  --cz-color-border-strong: #d5d2d8;
  --cz-color-overlay: rgba(16, 18, 20, 0.45);
  --cz-color-success: #16a34a;
  --cz-color-warning: #d97706;
  --cz-color-error: #dc2626;

  /* Compatibility aliases (existing overrides) */
  --cz-brand: var(--cz-color-primary);
  --cz-brand-hover: var(--cz-color-primary-hover);
  --cz-brand-soft: var(--cz-color-primary-soft);
  --cz-brand-border: var(--cz-color-primary-border);
  --cz-ink: var(--cz-color-ink);
  --cz-muted: var(--cz-color-text-secondary);

  /* Remap Loom native blues when this file is loaded before overrides */
  --thd-color-blue-70: var(--cz-color-primary);
  --thd-color-blue-80: var(--cz-color-primary-hover);
  --thd-color-blue-70-50: #0058e080;

  /* ——— Typography ——— target: Charlie Display for all landing text */
  --cz-font: "Charlie Display", "Segoe UI", system-ui, sans-serif;
  --cz-font-display: var(--cz-font);
  --cz-font-body: var(--cz-font);

  --cz-weight-regular: 400;
  --cz-weight-semibold: 600;
  --cz-weight-bold: 700;

  --cz-text-display: clamp(2.35rem, 5vw, 3.75rem);
  --cz-text-hero: var(--cz-text-display);
  --cz-text-h2: clamp(2rem, 2.4vw + 1.1rem, 2.85rem);
  --cz-text-h3: clamp(1.5rem, 1.2vw + 1rem, 1.95rem);
  --cz-text-h4: clamp(1.1875rem, 0.45vw + 1.05rem, 1.375rem);
  --cz-text-lead: clamp(1.125rem, 0.4vw + 1rem, 1.35rem);
  --cz-text-body: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --cz-text-body-sm: 1rem;
  --cz-text-eyebrow: 0.8125rem;
  --cz-text-button: 0.9375rem;
  --cz-text-nav: 0.9375rem;
  --cz-text-caption: 0.8125rem;
  --cz-text-price: clamp(1.5rem, 1vw + 1.1rem, 1.75rem);

  --cz-leading-display: 1.05;
  --cz-leading-hero: 1.08;
  --cz-leading-heading: 1.15;
  --cz-leading-body: 1.6;
  --cz-leading-lead: 1.55;

  --cz-tracking-display: -0.03em;
  --cz-tracking-heading: -0.025em;
  --cz-tracking-eyebrow: 0.06em;

  --cz-measure: 36rem;

  /* ——— Spacing ——— */
  --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-7: 32px;
  --cz-space-8: 40px;
  --cz-space-9: 48px;
  --cz-space-10: 64px;
  --cz-space-11: 80px;
  --cz-space-12: 96px;
  --cz-space-13: 128px;

  --cz-section-y: clamp(4.5rem, 8vw, 8rem);
  --cz-section-y-tight: clamp(3.5rem, 5vw, 5.5rem);
  --cz-container-pad-x: clamp(1.5rem, 12vw, 12rem);
  --cz-band-pad-x: clamp(1.25rem, 4.5vw, 3.25rem);
  --cz-surface-product-chat: #fff5d4;
  --cz-surface-product-voice: #e7eefa;
  --cz-surface-product-leads: #ecd5fa;
  --cz-surface-industry-mint: #d8f3dc;
  --cz-surface-inverse: #111318;
  --cz-blog-block: var(--cz-color-primary);
  --cz-blog-card: #003a9a;
  --cz-stack-heading: var(--cz-space-4);
  --cz-stack-copy: var(--cz-space-6);
  --cz-stack-cta: var(--cz-space-3);
  --cz-grid-gap: var(--cz-space-6);
  --cz-card-gap: var(--cz-space-4);
  --cz-card-pad: var(--cz-space-6);
  --cz-header-pad-y: var(--cz-space-3);
  --cz-header-gap: var(--cz-space-5);

  --cz-container: 1200px;
  --cz-container-hero: 760px;
  --cz-container-media: 1120px;
  --cz-container-narrow: 720px;
  --cz-container-pricing: 960px;
  --cz-container-wide: 1280px;

  /* ——— Radius ——— */
  --cz-radius-control: 8px;
  --cz-radius-button: 9999px;
  --cz-radius-card: 16px;
  --cz-radius-media: 16px;
  --cz-radius-section: 20px;
  --cz-radius-modal: 18px;
  --cz-radius-header-logo: 9px;
  --cz-radius-pill: 9999px;

  /* ——— Buttons ——— */
  --cz-btn-height: 44px;
  --cz-btn-height-sm: 40px;
  --cz-btn-pad-x: 1.25rem;

  /* ——— Elevation ——— */
  --cz-shadow-card: 0 1px 2px rgba(16, 18, 20, 0.04), 0 4px 14px rgba(16, 18, 20, 0.035);
  --cz-shadow-featured: 0 10px 32px rgba(0, 88, 224, 0.14);
  --cz-shadow-modal: 0 24px 60px rgba(16, 18, 20, 0.18);
  --cz-shadow-nav: -12px 0 40px rgba(16, 18, 20, 0.12);

  /* ——— Motion ——— */
  --cz-duration-fast: 180ms;
  --cz-duration-normal: 250ms;
  --cz-duration-max: 300ms;
  --cz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ——— Breakpoints (documentation; use in @media as literals) ——— */
  --cz-bp-sm: 640px;
  --cz-bp-md: 768px;
  --cz-bp-nav: 901px;
  --cz-bp-lg: 1024px;
  --cz-bp-xl: 1280px;

  /* ——— Z-index ——— */
  --cz-z-header: 40;
  --cz-z-overlay: 80;
  --cz-z-drawer: 90;
  --cz-z-modal-backdrop: 100;
  --cz-z-modal: 110;
}

@media (max-width: 640px) {
  :root {
    --cz-radius-media: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cz-duration-fast: 0ms;
    --cz-duration-normal: 0ms;
    --cz-duration-max: 0ms;
  }
}