/* ───────────────────────────────────────────────────────────────
 * Multideal design tokens - THE ONLY PLACE raw values live.
 * Brand: Blue + White. Green is retained as a semantic vendor-mode accent only.
 * Every other file (components, pages, features) must use these tokens via
 * Tailwind v4 `@theme` classes or `var(--*)` references.
 * ─────────────────────────────────────────────────────────────── */

@theme {
  /* ─── Typography ─── */
  --font-he: 'Heebo Variable', 'Heebo', system-ui, -apple-system, sans-serif;
  --font-en: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: var(--font-he);
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Font scale - set by AccessibilityTrigger. S/M/L/XL → 0.9 / 1 / 1.125 / 1.25 */
  --font-scale: 1;
  --font-size-2xs: calc(0.625rem * var(--font-scale));
  --text-2xs: 0.625rem;
  --text-2xs--line-height: 1rem;
  --font-size-xs: calc(0.75rem * var(--font-scale));
  --font-size-sm: calc(0.875rem * var(--font-scale));
  --font-size-base: calc(1rem * var(--font-scale));
  --font-size-md: calc(1rem * var(--font-scale));
  --font-size-lg: calc(1.125rem * var(--font-scale));
  --font-size-xl: calc(1.25rem * var(--font-scale));
  --font-size-2xl: calc(1.5rem * var(--font-scale));
  --font-size-3xl: calc(2rem * var(--font-scale));
  --font-size-4xl: calc(2.5rem * var(--font-scale));
  --font-size-5xl: calc(3rem * var(--font-scale));
  --font-size-6xl: calc(3.75rem * var(--font-scale));
  --font-size-display: calc(2.5rem * var(--font-scale));
  --font-size-display-lg: calc(2.5rem * var(--font-scale));
  --font-size-display-xl: calc(3.25rem * var(--font-scale));
  --font-weight-extrabold: 800;

  --font-weight-regular: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-display: 1.05;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --tracking-display-tight: -0.025em;
  --tracking-price-tight: -0.02em;
  --tracking-countdown-numeric: 0.03em;

  /* ─── Spacing (4 px base scale) ─── */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem; /* 2 */
  --spacing-1: 0.25rem; /* 4 */
  --spacing-1_5: 0.375rem; /* 6 */
  --spacing-2: 0.5rem; /* 8 */
  --spacing-2_5: 0.625rem; /* 10 */
  --spacing-3: 0.75rem; /* 12 */
  --spacing-4: 1rem; /* 16 */
  --spacing-5: 1.25rem; /* 20 */
  --spacing-6: 1.5rem; /* 24 */
  --spacing-7: 1.75rem; /* 28 */
  --spacing-8: 2rem; /* 32 */
  --spacing-10: 2.5rem; /* 40 */
  --spacing-12: 3rem; /* 48 */
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --size-hairline-indicator: 0.125rem;
  --size-avatar-ring: 0.1875rem;
  --stores-map-height: 37.5rem;
  --email-log-panel-height: 37.5rem;
  --page-organizer-preview-height: 37.5rem;
  --action-drawer-max-width: 30rem;

  /* ─── Radii ─── */
  --radius-xs: 0.25rem; /* 4 */
  --radius-sm: 0.5rem; /* 8 */
  --radius-md: 0.75rem; /* 12 */
  --radius-lg: 1.25rem; /* 20 — card body */
  --radius-xl: 1.5rem; /* 24 — section / banner */
  --radius-2xl: 1.25rem; /* 20 — alias of lg; Tailwind v4 maps `rounded-2xl` here so existing usages render at card-correct radius without grep-replace */
  --radius-3xl: 2rem; /* 32 — large sheet / drawer corners */
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 16px 0 rgb(0 0 0 / 0.06);
  --shadow-lg: 0 12px 32px 0 rgb(0 0 0 / 0.08);
  --shadow-xl: 0 24px 56px 0 rgb(0 0 0 / 0.1);
  --shadow-focus-primary: 0 0 0 3px rgb(30 64 175 / 0.4);
  --shadow-focus-vendor: 0 0 0 3px rgb(21 128 61 / 0.4);
  --shadow-elevation-1: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.72);
  --shadow-elevation-2: 0 10px 24px -12px rgb(15 23 42 / 0.24), 0 0 0 1px rgb(255 255 255 / 0.78);
  --shadow-elevation-3: 0 18px 42px -20px rgb(15 23 42 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.82);
  --shadow-elevation-4: 0 24px 56px -24px rgb(15 23 42 / 0.34), 0 0 0 1px rgb(255 255 255 / 0.86);
  --shadow-urgent-pulse-start: 0 0 0 0
    color-mix(in srgb, var(--color-timer-urgent) 50%, transparent);
  --shadow-urgent-pulse-end: 0 0 0 8px transparent;

  /* ─── Motion ─── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;

  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-duration-overlay-enter: 200ms;
  --motion-duration-overlay-exit: 160ms;
  --motion-duration-press: 120ms;
  --motion-duration-spin: 900ms;
  --motion-duration-pull-release: 220ms;
  --motion-duration-countdown-breathe: 1.8s;
  --motion-duration-countdown-dot-pulse: 1.4s;
  --motion-duration-countdown-digit-flip: 420ms;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --motion-ease-enter: var(--ease-out);
  --motion-ease-exit: var(--ease-in);
  --motion-ease-standard: var(--ease-in-out);
  --motion-ease-emphasized: var(--ease-emphasized);
  --motion-stagger-1: 40ms;
  --motion-stagger-2: 80ms;
  --motion-stagger-3: 120ms;

  /* ─── Layout dimensions ─── */
  --bottom-nav-height: 4.5rem;
  --touch-target-min: 2.75rem;

  /* ─── Z-index scale ─── */
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-sticky-top: 1150;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-a11y-trigger: 1600;

  /* ─── Breakpoints (Tailwind v4 consumes these) ─── */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

  /* ─────────────────────────────────────────────────────────────
   * COLORS - Blue (brand) + White + Green (vendor accent) + semantic
   * All ramps 50 → 950 so they're usable as bg / text / border.
   * ───────────────────────────────────────────────────────────── */

  /* Brand primary - Blue */
  --color-brand-primary-50: #eff6ff;
  --color-brand-primary-100: #dbeafe;
  --color-brand-primary-200: #bfdbfe;
  --color-brand-primary-300: #93c5fd;
  --color-brand-primary-400: #60a5fa;
  --color-brand-primary-500: #3b82f6;
  --color-brand-primary-600: #2563eb;
  --color-brand-primary-700: #1d4ed8;
  --color-brand-primary-800: #1e40af;
  --color-brand-primary-900: #1e3a8a;
  --color-brand-primary-950: #172554;

  --color-brand-on-primary: #ffffff;
  --color-brand-surface: #ffffff;

  /* Customer mode = same as brand primary */
  --color-mode-customer-50: var(--color-brand-primary-50);
  --color-mode-customer-100: var(--color-brand-primary-100);
  --color-mode-customer-200: var(--color-brand-primary-200);
  --color-mode-customer-300: var(--color-brand-primary-300);
  --color-mode-customer-400: var(--color-brand-primary-400);
  --color-mode-customer-500: var(--color-brand-primary-500);
  --color-mode-customer-600: var(--color-brand-primary-600);
  --color-mode-customer-700: var(--color-brand-primary-700);
  --color-mode-customer-800: var(--color-brand-primary-800);
  --color-mode-customer-900: var(--color-brand-primary-900);
  --color-mode-customer-950: var(--color-brand-primary-950);

  /* Vendor mode = Green (semantic accent) */
  --color-mode-vendor-50: #f0fdf4;
  --color-mode-vendor-100: #dcfce7;
  --color-mode-vendor-200: #bbf7d0;
  --color-mode-vendor-300: #86efac;
  --color-mode-vendor-400: #4ade80;
  --color-mode-vendor-500: #22c55e;
  --color-mode-vendor-600: #0f5132;
  --color-mode-vendor-700: #15803d;
  --color-mode-vendor-800: #166534;
  --color-mode-vendor-900: #14532d;
  --color-mode-vendor-950: #052e16;

  /* Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;

  /* Semantic */
  --color-success-50: #f0fdf4;
  --color-success-200: #bbf7d0;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-surface: var(--color-success-50);
  --color-success-border: var(--color-success-200);

  --color-warning-50: #fffbeb;
  --color-warning-200: #fde68a;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-surface: var(--color-warning-50);
  --color-warning-border: var(--color-warning-200);

  --color-danger-50: #fef2f2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* Illustration palette — used by SVG error illustrations (fill="var(--…)") */
  --color-illustration-navy: #183090;
  --color-illustration-cream: #f0f0e0;

  /* Accent palette — soft tints for section panels */
  --color-accent-warm-50: #fff7ed;
  --color-accent-warm-100: #ffedd5;
  --color-accent-cool-50: #ecfeff;
  --color-accent-cool-100: #cffafe;
  --color-accent-soft-50: #faf5ff;
  --color-accent-soft-100: #f3e8ff;

  /* Surface */
  --color-surface-app: #f0f1f2;
  --color-surface-base: var(--color-neutral-0);
  --color-surface-page: var(--color-surface-app);
  --color-surface-default: var(--color-neutral-0);
  --color-surface-raised: var(--color-neutral-50);
  --color-surface-elevated: var(--color-neutral-50);
  --color-surface-subtle: var(--color-neutral-100);
  --color-surface-inset: var(--color-neutral-100);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-overlay: rgb(17 24 39 / 0.6);
  --color-surface-sunken: color-mix(in srgb, var(--color-neutral-100) 72%, white);

  /* Text */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-muted: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-on-brand: var(--color-brand-on-primary);
  --color-text-link: var(--color-brand-primary-700);

  /* Border */
  --color-border: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus-primary: var(--color-brand-primary-500);
  --color-border-focus-vendor: var(--color-mode-vendor-500);
  --color-border-hairline: rgb(255 255 255 / 0.85);
  --color-border-hairline-strong: rgb(148 163 184 / 0.28);
  --color-border-hairline-inverse: rgb(255 255 255 / 0.22);

  --color-deal-ambient-neutral: rgba(148, 163, 184, 0.24);

  /* Countdown timer stage colors (FDS 4.2) */
  --color-timer-neutral: var(--color-brand-primary-700);
  --color-timer-warm: var(--color-danger-500);
  --color-timer-urgent: var(--color-danger-600);

  /* ─── Brand secondary - light-blue (sky) ramp ─── */
  --color-brand-secondary-50: #f0f9ff;
  --color-brand-secondary-100: #e0f2fe;
  --color-brand-secondary-200: #bae6fd;
  --color-brand-secondary-300: #7dd3fc;
  --color-brand-secondary-400: #38bdf8;
  --color-brand-secondary-500: #0ea5e9;
  --color-brand-secondary-600: #0284c7;
  --color-brand-secondary-700: #0369a1;
  --color-brand-secondary-800: #075985;
  --color-brand-secondary-900: #0c4a6e;
  --color-brand-secondary-950: #082f49;

  /* ─── Glass / frosted-glass tokens ─── */
  /* White-tinted backgrounds at three opacity levels */
  --color-glass-bg-light: rgb(255 255 255 / 0.72);
  --color-glass-bg-medium: rgb(255 255 255 / 0.55);
  --color-glass-bg-strong: rgb(255 255 255 / 0.4);

  /* Brand-blue tinted backgrounds (for glass nav) */
  --color-glass-bg-primary: rgb(30 64 175 / 0.8);
  --color-glass-bg-primary-medium: rgb(30 64 175 / 0.65);

  /* Glass borders */
  --color-glass-border-white: rgb(255 255 255 / 0.3);
  --color-glass-border-primary: rgb(147 197 253 / 0.4);

  /* Blur levels - used with backdrop-filter */
  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);

  /* Glass shadows */
  --shadow-glass: 0 4px 24px -4px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-glass-border-white);
  --shadow-glass-primary:
    0 4px 24px -4px rgb(30 64 175 / 0.25), 0 0 0 1px var(--color-glass-border-primary);

  /* Glass surface aliases */
  --color-surface-glass: var(--color-glass-bg-light);
  --color-surface-glass-primary: var(--color-glass-bg-primary);
  --gradient-brand-accent: linear-gradient(
    135deg,
    var(--color-brand-primary-500),
    var(--color-brand-primary-700)
  );
  --gradient-action: var(--gradient-brand-accent);
  --gradient-brand-surface: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand-primary-50) 92%, white),
    color-mix(in srgb, var(--color-brand-primary-100) 88%, white)
  );
  --gradient-neutral-soft: linear-gradient(
    90deg,
    var(--color-neutral-400),
    var(--color-neutral-600)
  );
  --gradient-map-thumbnail: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--color-neutral-200) 10px,
    var(--color-neutral-200) 11px
  );

  /* Depth & light recipes */
  --fx-panel-shadow-rest: var(--shadow-elevation-1);
  --fx-panel-shadow-hover: var(--shadow-elevation-2);
  --fx-panel-hairline: 0 0 0 1px var(--color-border-hairline);
  --fx-panel-hairline-strong: 0 0 0 1px var(--color-border-hairline-strong);
  --fx-button-primary-bg: var(--gradient-brand-accent);
  --fx-button-primary-shadow: var(--shadow-elevation-2);
  --fx-button-primary-shadow-hover: var(--shadow-elevation-3);
  --fx-button-secondary-bg: var(--gradient-brand-surface);
  --fx-button-secondary-shadow: var(--shadow-elevation-1);
  --fx-button-secondary-shadow-hover: var(--shadow-elevation-2);
  --fx-button-ghost-bg-hover: color-mix(in srgb, var(--color-brand-primary-50) 88%, white);
  --fx-button-ghost-bg-active: color-mix(in srgb, var(--color-brand-primary-100) 92%, white);
  --fx-button-danger-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-danger-50) 94%, white),
    color-mix(in srgb, var(--color-danger-50) 82%, var(--color-danger-500))
  );
  --fx-button-danger-shadow: var(--shadow-elevation-1);
  --fx-card-bg: color-mix(in srgb, var(--color-surface-base) 96%, white);
  --fx-card-border: var(--fx-panel-hairline-strong);
  --fx-card-shadow: var(--shadow-elevation-1);
  --fx-card-shadow-hover: var(--shadow-elevation-2);
  --fx-card-overlay: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0));

  /* ─── Interaction animation tokens ─── */
  --deal-card-foil-background: rgb(23 23 23);
  --deal-card-foil-gradient: linear-gradient(
    115deg,
    rgb(255 255 255 / 0) 34%,
    rgb(255 255 255 / 0.14) 44%,
    rgb(255 245 196 / 0.72) 50%,
    rgb(255 255 255 / 0.14) 56%,
    rgb(255 255 255 / 0) 66%
  );
  --deal-card-foil-size: 240% 100%;
  --deal-card-foil-start-rtl: 140% 0, 0 0;
  --deal-card-foil-end-rtl: -140% 0, 0 0;
  --deal-card-foil-start-ltr: -140% 0, 0 0;
  --deal-card-foil-end-ltr: 140% 0, 0 0;
  --deal-card-foil-duration-ms: 900;
  --deal-card-foil-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --qr-card-perspective: 75rem;
  --map-cluster-size: 2.5rem;
  --map-cluster-radius: 9999px;
  --map-cluster-background: var(--color-brand-primary-600);
  --map-cluster-foreground: var(--color-neutral-0);
  --map-cluster-font-weight: var(--font-weight-bold);
  --map-cluster-shadow: 0 0.625rem 1.5625rem rgb(0 0 0 / 0.18);
  --map-cluster-duration: 380ms;
  --map-cluster-easing: cubic-bezier(0.22, 1.2, 0.36, 1);
  --map-cluster-scale-start: 0.72;
  --map-cluster-scale-peak: 1.08;
  --map-cluster-scale-end: 1;
  --map-popup-min-width: 12.5rem;
  --map-popup-max-width: 16.25rem;
  --map-popup-cluster-min-width: 13.75rem;
  --map-popup-cluster-max-width: 18.75rem;
  --map-popup-cluster-max-height: 17.5rem;
  --map-popup-deal-gap: var(--spacing-2);

  /* ─── Desktop layout tokens ─── */
  --height-desktop-topnav: 2.75rem; /* 44px */
  --topnav-offset: calc(var(--height-desktop-topnav) + var(--spacing-8));
  --max-width-desktop-content: 80rem; /* 1280px */

  /* ─── Skeleton loading tokens ─── */
  --color-skeleton-base: var(--color-neutral-200);
  --color-skeleton-shine: var(--color-neutral-100);

  /* ─── Safe area (notch / Dynamic Island / home indicator) ─── */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-start: env(safe-area-inset-left, 0px);
  --safe-area-end: env(safe-area-inset-right, 0px);
}

.tracking-display-tight {
  letter-spacing: var(--tracking-display-tight);
}

.tracking-price-tight {
  letter-spacing: var(--tracking-price-tight);
}

.tracking-countdown-numeric {
  letter-spacing: var(--tracking-countdown-numeric);
}

/* RTL: remap logical start/end safe-area to physical inset on the opposite edge.
 * Hebrew (default) puts "start" on the right side; landscape island on right
 * must be reachable via padding-inline-start. */
[dir='rtl'] {
  --safe-area-start: env(safe-area-inset-right, 0px);
  --safe-area-end: env(safe-area-inset-left, 0px);
}

/* ── Phase 4: data-auth pre-hydration visibility hooks ──────────────────────
 * Set by MhBootstrap inline script before hydration.
 * Hides user-only content for guests and vice-versa without JS flash.
 * data-pending attribute on elements while personalization data is loading.
 */
[data-auth='guest'] [data-show-when='user'] {
  display: none !important;
}
[data-auth='user'] [data-show-when='guest'] {
  display: none !important;
}
[data-auth] [data-show-when='user'][data-pending],
[data-auth] [data-show-when='guest'][data-pending] {
  opacity: 0.4;
}

/* ── Layout utility: sticky sidebar below the desktop top-nav ─────────────── */
.sticky-below-topnav {
  top: var(--topnav-offset);
}