/* ==========================================================================
   Design tokens — "iOS 27" glass design system (RTL / fa)
   Theme: light/dark via `color-scheme` + light-dark().
     - default: follows prefers-color-scheme
     - manual:  <html data-theme="light"> or <html data-theme="dark">
   Per-business re-skin: override ONLY the --brand-* variables (see brands/).
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../assets/fonts/Vazirmatn-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Brand (override per business) ---------------------------------- */
  --brand-primary: light-dark(#0a7f8f, #3cc4d4);        /* main action colour */
  --brand-primary-hover: light-dark(#086a78, #5dd2e0);
  --brand-on-primary: light-dark(#ffffff, #04262b);      /* text on primary */
  --brand-tint: light-dark(rgba(10,127,143,.12), rgba(60,196,212,.18)); /* soft bg */
  --brand-accent: light-dark(#c8923b, #e8b866);          /* secondary / highlight */
  --brand-accent-tint: light-dark(rgba(200,146,59,.14), rgba(232,184,102,.18));
  --brand-gradient: linear-gradient(135deg, light-dark(#0c93a6, #2aa9ba), light-dark(#0a6a86, #1d6f8c));
  /* ambient background blobs (what the glass blurs over) */
  --brand-blob-1: light-dark(#7fe0e8, #0e5964);
  --brand-blob-2: light-dark(#ffd9a0, #6b4a1e);
  --brand-blob-3: light-dark(#b7d4ff, #1d3e73);

  /* ---- Neutrals --------------------------------------------------------- */
  --bg: light-dark(#f2f4f7, #05080b);
  --bg-grouped: light-dark(#eceff3, #0b1015);
  --surface: light-dark(#ffffff, #141a21);
  --surface-2: light-dark(#f4f6f9, #1b232c);
  --surface-3: light-dark(#e9edf2, #242e39);
  --text: light-dark(#0e1620, #f3f6f9);
  --text-2: light-dark(#4a5666, #aab4c0);   /* >= 4.5:1 on --surface */
  --text-3: light-dark(#667284, #8a95a3);
  --hairline: light-dark(rgba(14,22,32,.10), rgba(255,255,255,.12));
  --separator: light-dark(rgba(14,22,32,.08), rgba(255,255,255,.08));
  --overlay: light-dark(rgba(10,16,24,.38), rgba(0,0,0,.6));

  /* ---- Semantic --------------------------------------------------------- */
  --success: light-dark(#1b7f4b, #4cd48a);
  --success-tint: light-dark(rgba(27,127,75,.12), rgba(76,212,138,.16));
  --warning: light-dark(#9a5b00, #ffbf4a);
  --warning-tint: light-dark(rgba(154,91,0,.12), rgba(255,191,74,.16));
  --danger: light-dark(#c42b36, #ff6b74);
  --danger-tint: light-dark(rgba(196,43,54,.10), rgba(255,107,116,.16));
  --info: light-dark(#1a62d6, #7ab0ff);
  --info-tint: light-dark(rgba(26,98,214,.10), rgba(122,176,255,.16));

  /* ---- Loyalty tiers ----------------------------------------------------- */
  --tier-bronze: linear-gradient(135deg, #e0a070, #9a5c2e);
  --tier-silver: linear-gradient(135deg, #e6ebf1, #9aa6b5);
  --tier-gold: linear-gradient(135deg, #ffe08a, #d29a1c);
  --tier-diamond: linear-gradient(135deg, #bff3ff, #7fa8ff 55%, #c9a8ff);
  --tier-bronze-text: #4a2610;
  --tier-silver-text: #29323e;
  --tier-gold-text: #4a3300;
  --tier-diamond-text: #10265a;

  /* ---- Glass ------------------------------------------------------------- */
  --glass-bg: light-dark(rgba(255,255,255,.62), rgba(28,36,46,.58));
  --glass-bg-strong: light-dark(rgba(255,255,255,.82), rgba(24,31,40,.8));
  --glass-border: light-dark(rgba(255,255,255,.7), rgba(255,255,255,.14));
  --glass-highlight: light-dark(rgba(255,255,255,.9), rgba(255,255,255,.18));
  --glass-blur: 28px;
  --glass-saturate: 1.8;
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  /* ---- Radii ------------------------------------------------------------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---- Shadows ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px light-dark(rgba(16,24,40,.06), rgba(0,0,0,.4)), 0 1px 1px light-dark(rgba(16,24,40,.04), rgba(0,0,0,.3));
  --shadow-2: 0 6px 20px -6px light-dark(rgba(16,24,40,.14), rgba(0,0,0,.55)), 0 2px 6px light-dark(rgba(16,24,40,.06), rgba(0,0,0,.35));
  --shadow-3: 0 24px 60px -16px light-dark(rgba(16,24,40,.28), rgba(0,0,0,.7)), 0 8px 20px -8px light-dark(rgba(16,24,40,.12), rgba(0,0,0,.5));
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 38%, transparent);

  /* ---- Typography -------------------------------------------------------- */
  --font: 'Vazirmatn', system-ui, -apple-system, 'Noto Sans Arabic', Tahoma, sans-serif;
  --fs-display: clamp(2.5rem, 7vw, 4rem);     /* hero */
  --fs-large-title: clamp(2.125rem, 5.4vw, 3rem);
  --fs-title-1: 1.75rem;
  --fs-title-2: 1.375rem;
  --fs-title-3: 1.25rem;
  --fs-headline: 1.0625rem;
  --fs-body: 1rem;
  --fs-callout: .9375rem;
  --fs-subhead: .875rem;
  --fs-footnote: .8125rem;
  --fs-caption: .75rem;
  --lh-tight: 1.35;   /* large titles */
  --lh-body: 1.8;     /* Persian needs generous leading */

  /* ---- Spacing ----------------------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --tap: 48px;           /* min touch target */
  --page-pad: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);   /* subtle overshoot */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);      /* expo-out */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms; --dur: 280ms; --dur-slow: 480ms;
}

@media (min-width: 768px) { :root { --page-pad: 28px; } }

/* Manual theme override */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Respect reduced motion: remove movement, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Fallback when backdrop-filter is unavailable: use stronger opaque glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--surface); --glass-bg-strong: var(--surface); }
}