/* Techtonix design tokens — light theme matching the user's reference mockup exactly:
   white/light page, magenta-purple as the primary accent (prices, CTAs, active states),
   turquoise as the secondary accent (icon chips, warranty badges, highlights). Dark and white
   are both still "in the palette" — dark shows up in nav/body text and the footer, not as a
   full dark page background. WhatsApp buttons stay WhatsApp-green, always. */
:root {
  /* Page chrome — light */
  --tx-bg: #ffffff;
  --tx-bg-alt: #f8f7fb;
  --tx-bg-tint: #fdf2fa;
  --tx-border: #ece7f0;
  --tx-border-dark: #26262f;

  /* Card surfaces */
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f7fb;

  /* Text */
  --tx-text: #1a1a22;
  --tx-text-muted: #6b6b76;
  --tx-text-on-dark: #ffffff;
  --tx-text-on-dark-muted: rgba(255, 255, 255, 0.68);

  /* Primary accent — magenta-purple. Prices, primary buttons, active pills/filters. */
  --tx-accent: #a3178f;
  --tx-accent-hover: #811270;
  --tx-accent-soft: #fbe8f6;

  /* Secondary accent — turquoise. Icon chips, badges, decorative highlights. */
  --tx-accent-2: #16b8c4;
  --tx-accent-2-hover: #0e8f99;
  --tx-accent-2-soft: #e3f8fa;

  /* Semantic — stock-status badges */
  --tx-success: #16a34a;
  --tx-success-soft: #e8f8ee;
  --tx-warning: #b5790a;
  --tx-warning-soft: #fdf3e1;
  --tx-danger: #c6333f;
  --tx-danger-soft: #fcebec;

  /* WhatsApp — locked, never themed */
  --tx-whatsapp: #25D366;
  --tx-whatsapp-dark: #128C7E;

  /* Spacing (4px base) */
  --tx-space-1: 4px;
  --tx-space-2: 8px;
  --tx-space-3: 12px;
  --tx-space-4: 16px;
  --tx-space-5: 24px;
  --tx-space-6: 32px;
  --tx-space-7: 48px;
  --tx-space-8: 64px;

  /* Radius */
  --tx-radius-sm: 8px;
  --tx-radius-md: 14px;
  --tx-radius-lg: 20px;
  --tx-radius-pill: 999px;

  /* Shadow */
  --tx-shadow-sm: 0 1px 4px rgba(20, 20, 20, 0.06);
  --tx-shadow-md: 0 8px 24px rgba(20, 20, 20, 0.10);
  --tx-shadow-focus: 0 0 0 3px var(--tx-accent-soft);

  /* Type (Inter already imported by style.css) */
  --tx-fs-xs: 0.8rem;
  --tx-fs-sm: 0.9rem;
  --tx-fs-base: 1rem;
  --tx-fs-lg: 1.15rem;
  --tx-fs-xl: 1.5rem;
  --tx-fs-2xl: 2rem;
  --tx-fs-3xl: 2.75rem;
  --tx-fw-medium: 500;
  --tx-fw-semibold: 600;
  --tx-fw-bold: 700;
}