/*
 * JO-Dealz - Design Tokens
 * Single source of truth for brand color, spacing, radius, shadow and type
 * scale. Loaded before every other stylesheet so both legacy bundles and
 * new component CSS can reference the same variables.
 */
:root {
  /* Brand colors */
  --color-primary: #F52A3B;
  --color-primary-hover: #B50045;
  --color-primary-active: #900037;
  --color-orange: #FF7A2F;
  --color-yellow: #FFC61A;
  --color-success: #10B981;
  --color-bg: #F7F7F9;
  --color-white: #FFFFFF;

  --color-primary-rgb: 245, 42, 59;
  --color-primary-hover-rgb: 181, 0, 69;
  --color-primary-active-rgb: 144, 0, 55;
  --color-orange-rgb: 255, 122, 47;
  --color-yellow-rgb: 255, 198, 26;
  --color-success-rgb: 16, 185, 129;

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --gradient-warm: linear-gradient(135deg, var(--color-orange) 0%, var(--color-primary) 100%);

  /* Radius scale */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* Shadow scale */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px -12px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12);

  /* Fluid section spacing */
  --space-section: clamp(2.5rem, 5vw, 5rem);
  --space-section-sm: clamp(1.5rem, 3vw, 2.5rem);

  /* Type stacks */
  --font-display: 'Poppins', 'Cairo', sans-serif;
  --font-body: 'Inter', 'Cairo', sans-serif;

  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root.dark,
.dark {
  --color-bg: #0B0F19;
}

/*
 * tailwind.min.css is a stale, hand-maintained build with no content-scan
 * pipeline (see Phase 1 notes) — a handful of utility classes used in
 * templates were never generated. Patch only the confirmed-missing ones
 * here rather than hand-editing the vendor file.
 */
.scale-0 {
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
  --tw-scale-x: 0;
  --tw-scale-y: 0;
}