/* ==========================================================================
   Xrubiks Design Tokens — v2 (Figma-accurate, Apple-style)
   Single source of truth for the Xrubiks visual language, calibrated to the
   actual Figma variables in file i0jjYyGnT6d2RlqpmoJrES.

   Palette is iOS / Apple-inspired, with TWO blue families (verified against
   the Figma fills):
     - Azure (#0091ff) — interactive: links, glass-button tints, icons
     - Royal (#0051ff) — solid brand: Home badges, hero, promo blocks
     - Near-black (#1d1d1f) for dark surfaces (not navy)
     - Neon green (#49ff9e) for success / in-stock
     - Orange (#fc9e00) for address highlight / promo accents
     - iOS label scale (#3c3c43 secondary)

   All tokens are namespaced `--xr-*`. Brand color tokens still reference the
   per-store theme (`--primary-color` set in base.html) and fall back to
   Apple Blue — multi-tenant theming continues to work, the default just
   moved from Tailwind blue to Apple Blue.

   Surfaces are dual-themed: a light storefront (default `:root`) and a dark
   product/account surface (`body.dark-home`, `[data-theme="dark"]`, `.xr-dark`).
   Typography is Cairo + Noto Sans Arabic for full RTL/LTR support.
   ========================================================================== */

:root {
  /* ----- Apple Blue scale (primary CTAs, links) -------------------------- */
  --xr-blue-50:  #eef4ff;   /* Figma "Badge background" */
  --xr-blue-100: #d6e9ff;
  --xr-blue-200: #adc8ff;
  --xr-blue-300: #7eb4ff;
  --xr-blue-400: #3ba0ff;
  --xr-blue-500: #0091ff;   /* primary / "Apple Blue Button" */
  --xr-blue-600: #0088ff;   /* link text / "Accent Blue" */
  --xr-blue-700: #006ee0;   /* pressed */
  --xr-blue-800: #0058b8;
  --xr-blue-900: #003f85;

  /* ----- Royal blue scale (solid brand: badges, hero, promo blocks) ------ */
  /* Verified from Figma: #0051ff dominates the Home screen (badges/hero/promos),
     with #63b4ff as a light tint and #0045d9 / #004d9f as the deeper steps. */
  --xr-royal-200: #d6e0ff;
  --xr-royal-300: #63b4ff;   /* light tint — product add-on highlights */
  --xr-royal-400: #2e7bff;
  --xr-royal-500: #0051ff;   /* royal brand solid — Home badges/hero/promos */
  --xr-royal-600: #0045d9;   /* pressed / gradient mid */
  --xr-royal-700: #004d9f;   /* deep — gradient end */

  /* Sky / info accent (kept for dark surfaces, restock, processing states) */
  --xr-sky-400: #38bdf8;
  --xr-sky-500: #0ea5e9;

  /* Promo violet (storefront promo cards / yoyos teaser) */
  --xr-violet-400: #a78bfa;
  --xr-violet-500: #8b5cf6;
  --xr-violet-700: #6d28d9;

  /* ----- Neutral / ink scale (Apple greys + near-black) ----------------- */
  --xr-white:    #ffffff;
  --xr-off-white:#f6f6f6;   /* Figma "1White" — product image bg */
  --xr-page-bg:  #f6f7f9;   /* Figma "Gray BG" — page bg under cards */
  --xr-gray-50:  #fafafe;
  --xr-gray-100: #f8f9fa;
  --xr-gray-150: #f1f4fb;
  --xr-gray-200: #f1f5f9;
  --xr-gray-300: #e2e8f0;
  --xr-gray-400: #dedede;   /* Figma "text border input" */
  --xr-gray-500: #8a8a8a;   /* Figma "Placeholder (DARK)" */
  --xr-gray-600: #727272;   /* Figma "Labels" — tertiary text */
  --xr-gray-700: #494949;   /* Figma "Input Color" — input value text */
  --xr-gray-800: #3c3c43;   /* Figma "Labels/Secondary" — iOS secondary */

  --xr-ink-650:  #1f1f23;   /* raised dark card on dark page */
  --xr-ink-700:  #1d1d1f;   /* Figma "Black" — primary dark surface + text */
  --xr-ink-750:  #161618;   /* dark sheet / cta bg */
  --xr-ink-800:  #131316;
  --xr-ink-850:  #0e0e10;
  --xr-ink-900:  #0a0a0c;   /* darkest app background */

  /* ----- Semantic palette ----------------------------------------------- */
  /* Per-store theme override still wins; default moved from #2563eb to Apple Blue. */
  --xr-color-primary:        var(--primary-color, #0091ff);
  --xr-color-primary-strong: #006ee0;
  --xr-color-link:           #0088ff;
  --xr-color-secondary:      var(--secondary-color, #0088ff);
  --xr-color-accent:         #0091ff;

  /* Royal solid brand — use for solid badges ("New"), hero, promo blocks.
     Distinct from --xr-color-primary (azure), which drives links/glass CTAs. */
  --xr-color-brand-solid:        #0051ff;
  --xr-color-brand-solid-strong: #0045d9;
  --xr-color-brand-solid-deep:   #004d9f;

  --xr-color-success:        #16a34a;   /* on light bg */
  --xr-color-success-neon:   #49ff9e;   /* Figma "Green" — checks on dark cards */
  --xr-color-success-bright: #22c55e;
  --xr-color-danger:         #dc2626;
  --xr-color-danger-bright:  #ef4444;
  --xr-color-warning:        #f59e0b;
  --xr-color-orange:         #fc9e00;   /* Figma "Orange" — address highlight */
  --xr-color-rating:         #0091ff;   /* stars are Apple Blue in this design */
  --xr-color-rating-gold:    #fbbf24;   /* preserved alias for legacy uses */
  --xr-color-info:           #38bdf8;

  /* Brand / social */
  --xr-color-facebook: #1877f2;
  --xr-color-whatsapp: #25d366;

  /* Sale price emphasis */
  --xr-color-sale: #ef4444;

  /* ----- Surfaces & text (LIGHT storefront — default) ------------------- */
  --xr-bg:            #f6f7f9;          /* page bg (was pure white) */
  --xr-bg-elevated:   #ffffff;          /* cards/sheets stacked on page */
  --xr-surface:       rgba(0, 0, 0, 0.02);
  --xr-surface-2:     rgba(0, 0, 0, 0.04);
  --xr-elevated:      #ffffff;
  --xr-navbar-bg:     rgba(255, 255, 255, 0.92);

  --xr-border:        rgba(0, 0, 0, 0.06);
  --xr-border-light:  rgba(0, 0, 0, 0.04);
  --xr-border-strong: #dedede;          /* input borders match Figma */
  --xr-dimming:       rgba(41, 41, 58, 0.23);  /* backdrop dim */

  --xr-text:           #1d1d1f;         /* Apple near-black */
  --xr-text-secondary: #3c3c43;         /* iOS secondary label */
  --xr-text-tertiary:  #727272;         /* iOS tertiary label */
  --xr-text-muted:     rgba(60, 60, 67, 0.30);
  --xr-text-on-primary:#ffffff;
  --xr-placeholder:    rgba(60, 60, 67, 0.30);

  /* ----- Typography ----------------------------------------------------- */
  --xr-font-sans: 'Cairo', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --xr-font-mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace; /* barcodes / labels */

  --xr-weight-regular:  400;
  --xr-weight-medium:   500;
  --xr-weight-semibold: 600;
  --xr-weight-bold:     700;
  --xr-weight-extrabold:800;
  --xr-weight-black:    900;

  /* Modular type scale (1rem = 16px base) */
  --xr-text-2xs: 0.6875rem;  /* 11px — labels, barcode meta */
  --xr-text-xs:  0.75rem;    /* 12px */
  --xr-text-sm:  0.8125rem;  /* 13px */
  --xr-text-base:0.875rem;   /* 14px — body default on mobile UI */
  --xr-text-md:  1rem;       /* 16px */
  --xr-text-lg:  1.125rem;   /* 18px */
  --xr-text-xl:  1.25rem;    /* 20px */
  --xr-text-2xl: 1.5rem;     /* 24px — section titles */
  --xr-text-3xl: 1.875rem;   /* 30px */
  --xr-text-4xl: 2.25rem;    /* 36px — hero */
  --xr-text-5xl: 3rem;       /* 48px — display */

  --xr-leading-tight:  1.2;
  --xr-leading-snug:   1.35;
  --xr-leading-normal: 1.6;

  --xr-tracking-tight:  -0.01em;
  --xr-tracking-normal: 0;
  --xr-tracking-wide:   0.04em;

  /* ----- Spacing scale (4px base) --------------------------------------- */
  --xr-space-0:  0;
  --xr-space-1:  0.25rem;   /* 4px  */
  --xr-space-2:  0.5rem;    /* 8px  */
  --xr-space-3:  0.75rem;   /* 12px */
  --xr-space-4:  1rem;      /* 16px */
  --xr-space-5:  1.25rem;   /* 20px */
  --xr-space-6:  1.5rem;    /* 24px */
  --xr-space-8:  2rem;      /* 32px */
  --xr-space-10: 2.5rem;    /* 40px */
  --xr-space-12: 3rem;      /* 48px — section padding */
  --xr-space-16: 4rem;      /* 64px — section padding lg */

  /* ----- Radius (mobile uses generous radii — Figma 16/20/24/28) -------- */
  --xr-radius-xs:   8px;     /* chip / tiny pill */
  --xr-radius-sm:   12px;    /* badge / inner card */
  --xr-radius-md:   16px;    /* input / list row / small card */
  --xr-radius-lg:   20px;    /* product card / list item */
  --xr-radius-xl:   24px;    /* section card */
  --xr-radius-2xl:  28px;    /* hero / page-level card */
  --xr-radius-3xl:  32px;    /* big sheet */
  --xr-radius-pill: 980px;   /* CTAs, chips, app-bar */
  --xr-radius-full: 9999px;

  /* ----- Elevation / shadow (softer — Apple sensibility) ---------------- */
  --xr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --xr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
  --xr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --xr-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
  --xr-shadow-pop:0 24px 60px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
  --xr-shadow-app-bar: 0 8px 24px rgba(0, 0, 0, 0.08);
  --xr-glow-primary: 0 8px 24px color-mix(in srgb, var(--xr-color-primary) 35%, transparent);

  /* ----- Motion --------------------------------------------------------- */
  --xr-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --xr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --xr-dur-fast: 180ms;
  --xr-dur:      280ms;
  --xr-dur-slow: 420ms;

  /* ----- Layout & z-index ----------------------------------------------- */
  --xr-container:    1200px;
  --xr-container-sm: 480px;     /* mobile-content max (centered on desktop) */
  --xr-page-pad:     16px;      /* outer horizontal page padding (mobile) */
  --xr-page-pad-lg:  24px;      /* desktop variant */
  --xr-nav-height:   64px;      /* floating app-bar */
  --xr-nav-height-lg:72px;
  --xr-stickybar:    88px;      /* sticky bottom CTA reserve */

  --xr-z-nav:     100;
  --xr-z-overlay: 200;
  --xr-z-sheet:   300;
  --xr-z-modal:   400;
  --xr-z-toast:   500;
}

/* ==========================================================================
   Dark surface theme
   Applied on product-detail / account screens via `body.dark-home`. Aliases
   provided for `[data-theme="dark"]` and a standalone `.xr-dark` scope.
   Only surface + text tokens change; brand/semantic palette stays constant.
   ========================================================================== */
body.dark-home,
[data-theme="dark"],
.xr-dark {
  --xr-bg:            #0a0a0c;
  --xr-bg-elevated:   #1d1d1f;
  --xr-surface:       rgba(255, 255, 255, 0.04);
  --xr-surface-2:     rgba(255, 255, 255, 0.06);
  --xr-elevated:      #1d1d1f;          /* Apple Black — primary dark card */
  --xr-navbar-bg:     rgba(29, 29, 31, 0.88);

  --xr-border:        rgba(255, 255, 255, 0.08);
  --xr-border-light:  rgba(255, 255, 255, 0.05);
  --xr-border-strong: rgba(255, 255, 255, 0.16);

  --xr-text:           #f2f4fc;         /* iOS Labels/Primary on dark */
  --xr-text-secondary: rgba(242, 244, 252, 0.65);
  --xr-text-tertiary:  rgba(242, 244, 252, 0.45);
  --xr-text-muted:     rgba(242, 244, 252, 0.35);
  --xr-placeholder:    #8a8a8a;         /* Figma "Placeholder (DARK)" */

  /* Stars and success markers on dark surface use the neon green */
  --xr-color-success:  #49ff9e;
  --xr-color-rating:   #0091ff;         /* still Apple Blue */

  --xr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --xr-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --xr-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.32);
  --xr-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --xr-shadow-pop:0 24px 60px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
}

/* ==========================================================================
   Optional base hooks (opt-in)
   Lightweight, low-specificity helpers that wire the tokens to real elements.
   Safe to use incrementally; they do not override existing component CSS.
   ========================================================================== */
.xr-surface  { background: var(--xr-bg); color: var(--xr-text); font-family: var(--xr-font-sans); }
.xr-card     { background: var(--xr-elevated); border: 1px solid var(--xr-border);
               border-radius: var(--xr-radius-xl); box-shadow: var(--xr-shadow-sm); }
.xr-card-sm  { background: var(--xr-elevated); border: 1px solid var(--xr-border);
               border-radius: var(--xr-radius-lg); box-shadow: var(--xr-shadow-xs); }

.xr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xr-space-2);
  font-family: var(--xr-font-sans); font-weight: var(--xr-weight-bold);
  font-size: var(--xr-text-base); line-height: 1; cursor: pointer;
  padding: var(--xr-space-3) var(--xr-space-6); border: 1px solid transparent;
  border-radius: var(--xr-radius-pill);
  transition: background var(--xr-dur-fast) var(--xr-ease),
              box-shadow var(--xr-dur-fast) var(--xr-ease),
              transform var(--xr-dur-fast) var(--xr-ease);
}
.xr-btn-primary   { background: var(--xr-color-primary); color: var(--xr-text-on-primary); box-shadow: var(--xr-glow-primary); }
.xr-btn-primary:hover  { background: var(--xr-color-primary-strong); }
.xr-btn-primary:active { transform: translateY(1px); }
.xr-btn-primary:disabled { background: var(--xr-surface-2); color: var(--xr-text-muted); box-shadow: none; cursor: not-allowed; }
.xr-btn-outline   { background: transparent; border-color: var(--xr-border-strong); color: var(--xr-text); }
.xr-btn-outline:hover { border-color: var(--xr-color-primary); color: var(--xr-color-primary); }

.xr-input {
  width: 100%; font-family: var(--xr-font-sans); font-size: var(--xr-text-md);
  color: var(--xr-text); background: var(--xr-elevated);
  padding: 14px var(--xr-space-4);
  border: 1px solid var(--xr-border-strong); border-radius: var(--xr-radius-md);
  transition: border-color var(--xr-dur-fast) var(--xr-ease), box-shadow var(--xr-dur-fast) var(--xr-ease);
}
.xr-input::placeholder { color: var(--xr-placeholder); }
.xr-input:focus {
  outline: none; border-color: var(--xr-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xr-color-primary) 20%, transparent);
}

.xr-badge { display: inline-flex; align-items: center; gap: var(--xr-space-1);
            font-size: var(--xr-text-xs); font-weight: var(--xr-weight-semibold);
            padding: 2px var(--xr-space-2); border-radius: var(--xr-radius-pill); }
.xr-badge-sale    { background: color-mix(in srgb, var(--xr-color-danger) 12%, transparent);  color: var(--xr-color-danger); }
.xr-badge-success { background: color-mix(in srgb, var(--xr-color-success) 12%, transparent); color: var(--xr-color-success); }
.xr-badge-info    { background: color-mix(in srgb, var(--xr-color-info) 12%, transparent);    color: var(--xr-color-info); }
/* Royal solid badge ("New" tags) and hero/promo gradient — the Figma's solid brand blue */
.xr-badge-new     { background: var(--xr-color-brand-solid); color: #fff; }
.xr-brand-solid   { background: var(--xr-color-brand-solid); color: #fff; }
.xr-brand-gradient{ background: linear-gradient(135deg, var(--xr-color-brand-solid) 0%, var(--xr-color-brand-solid-deep) 100%); color: #fff; }