/* ============================================
   Cafe Zeitlos - Design Tokens
   ============================================
   Central CSS custom properties for the
   Cafe Zeitlos WordPress theme.

   This file is the single source of truth for
   all static token defaults. The PHP Design
   Token Registry (class-design-token-registry.php)
   only contains tokens that are editable via
   the Customizer (theme_mod mapping).

   Legacy Customizer colors (--espresso, --dark,
   --gold, etc.) are defined first with their
   default values. The new --czt-* tokens
   reference these legacy variables so that
   existing Customizer inline CSS continues
   to work unchanged.
   ============================================ */

:root {
  /* ── Legacy Brand Colors (Customizer sets these) ── */
  --espresso: #100c06;
  --dark: #1a1208;
  --dark2: #241a0e;
  --gold: #c9a96e;
  --gold-light: #e8c98a;
  --cream: #f5efe6;

  /* ── New Tokens referencing legacy vars ── */
  --czt-color-primary: var(--espresso);
  --czt-color-surface: var(--dark);
  --czt-color-surface-alt: var(--dark2);
  --czt-color-accent: var(--gold);
  --czt-color-accent-light: var(--gold-light);
  --czt-color-text: var(--cream);

  /* ── Derived Text Colors ── */
  --czt-color-text-muted: rgba(245, 239, 230, 0.55);
  --czt-color-text-soft: rgba(245, 239, 230, 0.45);
  --czt-color-text-semi: rgba(245, 239, 230, 0.75);
  --czt-color-text-highlight: rgba(245, 239, 230, 0.8);
  --czt-color-text-faint: rgba(245, 239, 230, 0.25);

  /* ── Semantic Colors ── */
  --czt-color-error: #c0392b;
  --czt-color-hero-gradient-inner: #2a1a0e;

  /* ── Borders ── */
  --czt-color-border: rgba(201, 169, 110, 0.15);
  --czt-color-border-strong: rgba(201, 169, 110, 0.25);
  --czt-color-border-subtle: rgba(245, 239, 230, 0.06);
  --czt-color-border-light: rgba(245, 239, 230, 0.08);
  --czt-color-border-medium: rgba(245, 239, 230, 0.35);

  /* ── Surfaces & Overlays ── */
  --czt-color-glass-bg: rgba(16, 12, 6, 0.96);
  --czt-color-glass-mobile: rgba(16, 12, 6, 0.88);
  --czt-color-overlay-dark: rgba(16, 12, 6, 0.55);
  --czt-color-text-glass: rgba(245, 239, 230, 0.18);
  --czt-color-splash: rgba(245, 239, 230, 0.04);
  --czt-color-accent-bg: rgba(201, 169, 110, 0.1);
  --czt-color-accent-alpha: rgba(201, 169, 110, 0.6);

  /* ── Shadows ── */
  --czt-color-shadow-gold: rgba(201, 169, 110, 0.28);
  --czt-shadow-sm: 0 1px 0 rgba(31, 25, 21, 0.04);
  --czt-shadow-md: 0 8px 24px rgba(63, 48, 34, 0.1);
  --czt-shadow-lg: 0 8px 28px var(--czt-color-shadow-gold);
  --czt-shadow-sticky: 0 4px 24px rgba(0, 0, 0, 0.5);

  /* ── Typography ── */
  --czt-font-family-heading: 'Playfair Display', Georgia, serif;
  --czt-font-family-body: 'DM Sans', system-ui, sans-serif;

  /* Font sizes */
  --czt-font-size-3xs: 0.58rem;
  --czt-font-size-2xs: 0.6rem;
  --czt-font-size-xs: 0.62rem;
  --czt-font-size-sm: 0.68rem;
  --czt-font-size-base: 0.7rem;
  --czt-font-size-md: 0.72rem;
  --czt-font-size-lg: 0.75rem;
  --czt-font-size-xl: 0.8rem;
  --czt-font-size-2xl: 0.85rem;
  --czt-font-size-3xl: 0.88rem;
  --czt-font-size-4xl: 0.9rem;
  --czt-font-size-5xl: 0.95rem;
  --czt-font-size-6xl: 1rem;
  --czt-font-size-7xl: 1.1rem;
  --czt-font-size-8xl: 1.2rem;
  --czt-font-size-9xl: 1.4rem;
  --czt-font-size-10xl: 1.6rem;

  /* Line heights */
  --czt-line-height-tight: 0.92;
  --czt-line-height-snug: 1.1;
  --czt-line-height-normal: 1.2;
  --czt-line-height-relaxed: 1.4;
  --czt-line-height-loose: 1.6;
  --czt-line-height-extra: 1.85;

  /* Font weights */
  --czt-font-weight-light: 300;
  --czt-font-weight-normal: 400;
  --czt-font-weight-medium: 500;

  /* Letter spacing */
  --czt-letter-spacing-tight: 0.1em;
  --czt-letter-spacing-subtle: 0.12em;
  --czt-letter-spacing-medium: 0.14em;
  --czt-letter-spacing-wide: 0.15em;
  --czt-letter-spacing-wider: 0.28em;

  /* ── Typography (Design System) ── */
  --czt-font-family-ui: var(--czt-font-family-body);
  /* NOTE: --czt-font-weight-semibold and --czt-font-weight-bold removed
     because they were not referenced in any CSS/PHP template.
     Only --czt-font-weight-light/normal/medium are actively used. */

  --czt-fs-h1: clamp(2.25rem, calc(2.25rem + (3.5rem - 2.25rem) * ((100vw - 360px) / (1280px - 360px))), 3.5rem);
  --czt-fs-h2: clamp(2.2rem, 5vw, 3.6rem);
  --czt-fs-h3: clamp(1.375rem, calc(1.375rem + (1.625rem - 1.375rem) * ((100vw - 360px) / (1280px - 360px))), 1.625rem);
  --czt-fs-page-title: var(--czt-fs-h1);
  --czt-fs-section-title: var(--czt-fs-h2);
  --czt-fs-card-title: var(--czt-fs-product);
  --czt-fs-body: 1rem;
  --czt-fs-small: 0.75rem;
  --czt-fs-eyebrow: var(--czt-fs-label);
  --czt-fs-label: 0.68rem;
  --czt-fs-meta: var(--czt-fs-caption);

  --czt-lh-body: 1.7;
  --czt-fw-display: 400;
  --czt-ls-display: 0;
  --czt-lh-display: 0.92;
  --czt-fw-h1: 400;
  --czt-ls-h1: -0.01em;
  --czt-lh-h1: 1.1;
  --czt-fw-h2: 400;
  --czt-ls-h2: 0;
  --czt-lh-h2: 1.1;
  --czt-fw-h3: 500;
  --czt-ls-h3: 0;
  --czt-lh-h3: 1.25;
  --czt-fw-h4: 600;
  --czt-ls-h4: 0.01em;
  --czt-lh-h4: 1.3;
  --czt-fw-lead: 300;
  --czt-ls-lead: 0.12em;
  --czt-lh-lead: 1.6;
  --czt-fw-body: 400;
  --czt-ls-body: 0;
  --czt-fw-small: 400;
  --czt-ls-small: 0;
  --czt-lh-small: 1.4;
  --czt-fw-caption: 400;
  --czt-ls-caption: 0.02em;
  --czt-lh-caption: 1.4;
  --czt-fw-label: 300;
  --czt-ls-label: 0.3em;
  --czt-lh-label: 1.2;
  --czt-fw-nav: 300;
  --czt-ls-nav: 0.15em;
  --czt-lh-nav: 1.6;
  --czt-fw-button: 500;
  --czt-ls-button: 0.14em;
  --czt-lh-button: 1.6;
  --czt-fw-price: 300;
  --czt-ls-price: 0;
  --czt-lh-price: 1.6;
  --czt-fw-category: 400;
  --czt-ls-category: 0.16em;
  --czt-lh-category: 1.6;
  --czt-fw-product: 400;
  --czt-ls-product: 0;
  --czt-lh-product: 1.6;
  --czt-fw-product-desc: 300;
  --czt-ls-product-desc: 0;
  --czt-lh-product-desc: 1.4;

  /* ── Spacing ── */
  --czt-space-0: 0;
  --czt-space-1: 0.15rem;
  --czt-space-2: 0.35rem;
  --czt-space-3: 0.5rem;
  --czt-space-4: 0.7rem;
  --czt-space-5: 0.8rem;
  --czt-space-6: 0.85rem;
  --czt-space-7: 0.9rem;
  --czt-space-8: 1rem;
  --czt-space-9: 1.1rem;
  --czt-space-10: 1.2rem;
  --czt-space-11: 1.4rem;
  --czt-space-12: 1.5rem;
  --czt-space-14: 2rem;
  --czt-space-16: 2.2rem;
  --czt-space-18: 2.5rem;
  --czt-space-20: 3rem;
  --czt-space-22: 4rem;
  --czt-space-24: 5rem;
  --czt-space-26: 6rem;
  --czt-space-28: 7rem;
  --czt-space-30: 8rem;

  /* ── Layout ── */
  --czt-container-sm: 420px;
  --czt-container-md: 480px;
  --czt-container-lg: 800px;
  --czt-container-xl: 1100px;
  --czt-section-spacing: 7rem;
  --czt-section-spacing-mobile: 5rem;
  --czt-content-gap: 1.4rem;

  /* ── Radius ── */
  --czt-radius-sm: 2px;
  --czt-radius-md: 3px;
  --czt-radius-lg: 4px;
  --czt-radius-xl: 8px;
  --czt-radius-2xl: 10px;
  --czt-radius-full: 9999px;

  /* ── Motion ── */
  --czt-duration-fast: 0.2s;
  --czt-duration-normal: 0.25s;
  --czt-duration-slow: 0.3s;
  --czt-duration-slower: 0.4s;
  --czt-duration-slowest: 0.6s;
  --czt-duration-reveal: 0.8s;
  --czt-easing-standard: ease;
  --czt-easing-out: ease-in-out;

  /* ── Z-Index ── */
  --czt-z-dropdown: 50;
  --czt-z-header: 100;
  --czt-z-mobile-menu: 180;
  --czt-z-skip-link: 1000;

  /* ── Component Tokens ── */
  --czt-button-padding-block: 0.85rem;
  --czt-button-padding-inline: 2rem;
  --czt-button-radius: 3px;
  --czt-button-gap: 0.5rem;
  --czt-btn-py: var(--czt-button-padding-block);
  --czt-btn-px: var(--czt-button-padding-inline);
  --czt-btn-radius: var(--czt-button-radius);
  --czt-btn-transition: var(--czt-duration-normal);

  --czt-btn-primary-bg: var(--czt-color-accent);
  --czt-btn-primary-text: var(--czt-color-primary);
  --czt-btn-secondary-text: var(--czt-color-text);
  --czt-btn-secondary-border: var(--czt-color-border-medium);
  --czt-btn-secondary-hover-text: var(--czt-color-accent);
  --czt-btn-secondary-hover-border: var(--czt-color-accent);
  --czt-navigation-height: 60px;
  --czt-navigation-padding: 1.4rem 3rem;
  --czt-navigation-padding-mobile: 1.1rem 1.4rem;
  --czt-card-padding: 1.2rem;
  --czt-card-radius: 10px;
  --czt-card-shadow: 0 8px 24px rgba(63, 48, 34, 0.1);
  --czt-hero-min-height: 580px;
  --czt-grid-gap: 3px;
  --czt-grid-gap-mobile: 2px;

  /* ── Letter spacing tokens ── */
  --czt-ls-eyebrow: 0.32em;
  --czt-ls-section: 0.3em;
  --czt-ls-news-ticker: 0.24em;
  --czt-ls-scroll: 0.22em;
  --czt-ls-tab: 0.16em;
  --czt-ls-badge: 0.08em;

  /* ── Component-specific tokens ── */
  --czt-banner-padding: 9px 16px;
  --czt-banner-font-size: 0.82rem;
  --czt-banner-letter-spacing: 0.04em;
  --czt-video-feature-min-height: 600px;
  --czt-video-panel-min-height: 480px;

  /* ── Semantic Color Aliases (Agent B) ── */
  --czt-color-secondary: var(--czt-color-surface-alt);
  --czt-color-background: var(--czt-color-primary);
  --czt-color-surface-muted: var(--czt-color-surface-alt);
  --czt-color-success: #2f6f5e;
  --czt-color-warning: #b9853f;
  --czt-color-focus: var(--czt-color-accent);
  --czt-color-disabled: var(--czt-color-text-faint);
  --czt-color-hover: var(--czt-color-accent-light);
  --czt-color-active: var(--czt-color-accent);

  /* ── Additional Typography Tokens (Agent B) ── */
  --czt-fs-h1-page: var(--czt-fs-h1);
  --czt-fs-h4: clamp(1.125rem, calc(1.125rem + (1.25rem - 1.125rem) * ((100vw - 360px) / (1280px - 360px))), 1.25rem);
  --czt-fs-subtitle-lg: var(--czt-fs-lead);
  --czt-fs-subtitle: var(--czt-fs-lead);
  --czt-fs-lead: 0.88rem;
  --czt-fs-body-standard: var(--czt-fs-body);
  --czt-fs-caption: 0.75rem;
  --czt-fs-nav: 0.75rem;
  --czt-fs-button: 0.75rem;
  --czt-fs-price: 0.95rem;
  --czt-fs-menu-section: 0.65rem;
  --czt-fs-category: 0.72rem;
  --czt-fs-product: 0.9rem;
  --czt-fs-product-desc: 0.75rem;
  --czt-fs-display: clamp(4rem, 12vw, 9rem);

  /* ── Legacy aliases for backwards compatibility ── */
  --czt-fs-card: var(--czt-fs-product);
  --czt-fw-card: var(--czt-fw-product, var(--czt-font-weight-normal));
  --czt-ls-card: var(--czt-ls-product, 0);
  --czt-lh-card: var(--czt-lh-product, 1.6);
  --czt-fs-ui: var(--czt-fs-label);
  --czt-fw-ui: var(--czt-fw-label, var(--czt-font-weight-light));
  --czt-ls-ui: var(--czt-ls-label, 0.3em);
  --czt-lh-ui: var(--czt-lh-label, 1.2);
  --text-dim: var(--czt-color-text-muted);
  --serif: var(--czt-font-family-heading);
  --sans: var(--czt-font-family-body);
}