/* =========================================================
   Postzilla ORG — Design Tokens
   Deliberately separate identity from the product (postzilla.pro):
   strict black-on-white / white-on-black, no accent color.
   Same variable names as the product's tokens.css so every
   shared component (base/components/breakpoints) works unchanged.
   ========================================================= */

:root {
  /* ---- No brand color here on purpose — accent IS the ink ---- */
  --pz-danger: #D93025;
  --pz-warning: #B36B00;

  /* ---- Light theme (default): black on white ---- */
  --pz-bg: #FFFFFF;
  --pz-surface: #FFFFFF;
  --pz-surface-raised: #FFFFFF;
  --pz-border: #1A1A1A;
  --pz-text: #0A0A0A;
  --pz-text-muted: #4D4D4D;
  --pz-accent: #0A0A0A;
  --pz-accent-2: #0A0A0A;
  --pz-accent-contrast: #FFFFFF;
  --pz-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  /* Same shape, deeper spread — used on hover so a raised card
     reads as lifting further, not just switching shadows. */
  --pz-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.08);

  /* ---- Type scale (fluid, clamps between mobile and desktop) ---- */
  --pz-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pz-font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --pz-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --pz-text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --pz-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --pz-text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --pz-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --pz-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --pz-text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);

  /* ---- Spacing scale (4px base) ---- */
  --pz-space-1: 0.25rem;
  --pz-space-2: 0.5rem;
  --pz-space-3: 0.75rem;
  --pz-space-4: 1rem;
  --pz-space-5: 1.5rem;
  --pz-space-6: 2rem;
  --pz-space-7: 3rem;
  --pz-space-8: 4.5rem;
  --pz-space-9: 6rem;

  /* ---- Radius / elevation — sharper corners than the product site on purpose ---- */
  --pz-radius-sm: 4px;
  --pz-radius-md: 6px;
  --pz-radius-lg: 10px;
  --pz-radius-pill: 999px;

  /* ---- Layout ---- */
  --pz-container: 1200px;
  --pz-header-h: 72px;

  /* ---- Motion ---- */
  --pz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pz-fast: 150ms;
  --pz-slow: 320ms;
}

/* ---- Dark theme: white on black, still zero color ---- */
[data-theme="dark"] {
  --pz-bg: #000000;
  --pz-surface: #000000;
  --pz-surface-raised: #0A0A0A;
  --pz-border: #E5E5E5;
  --pz-text: #FFFFFF;
  --pz-text-muted: #B3B3B3;
  --pz-accent: #FFFFFF;
  --pz-accent-2: #FFFFFF;
  --pz-accent-contrast: #0A0A0A;
  --pz-shadow: 0 1px 2px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(255, 255, 255, 0.05);
  --pz-shadow-hover: 0 2px 4px rgba(255, 255, 255, 0.06), 0 16px 32px rgba(255, 255, 255, 0.06);
}