/**
 * FOR customer hub — dark espresso theme, design tokens.
 * -----------------------------------------------------
 * v2: color/visual-hierarchy refinement on top of the dark espresso
 * reversal (225c553). Layout, spacing, typography scale, nav structure,
 * responsiveness, ordering logic, Stripe, and animation timing are all
 * untouched -- this pass only touches color, border, and shadow tokens,
 * plus the one explicitly-requested card-hover treatment.
 *
 * Direction: the primary interactive accent moves from burgundy to a
 * soft antique gold (#C6A267). Burgundy (#4F151D) is now reserved for
 * brand/error/delete-only roles -- no longer used for active tabs,
 * buttons, nav, or the language switch anywhere. Every page was
 * individually audited for which burgundy usages were genuinely
 * "delete/critical" (kept) vs. "interactive accent" (moved to gold) --
 * see the commit message for the full per-page accounting.
 *
 * Architecture reused unchanged from the dark-theme reversal: separate
 * tokens for the "background/surface" role vs. the "must stay legible
 * regardless of surrounding surface" role. This pass adds a third role
 * (--accent-primary/hover/pressed, the new interactive color) and
 * refines the surface role from a single flat tone into a 4-step
 * hierarchy (bg-main < bg-secondary < surface-nav < surface) for more
 * deliberate visual layering. Existing token names from the prior pass
 * (--color-cream, --surface-card, --text-faded, --text-muted, etc.) are
 * kept as compatibility aliases pointing at the refined values, so pages
 * that don't need a specific new role didn't need touching.
 *
 * Real WCAG contrast (recomputed fresh for every new pairing, not
 * assumed): see commit message for the full table.
 */

:root {

  /* ============================================================
     COLOR — base palette (RGB triplets, so alpha-composed tokens
     below can reuse them via rgba(var(--c-x-rgb), alpha))
     ============================================================ */
  --c-burgundy-rgb: 79, 21, 29;      /* #4F151D — unchanged brand identity; now brand/error/delete-only, no longer the interactive accent */
  --c-bg-main-rgb:      26, 20, 18;  /* #1A1412 — page background */
  --c-bg-secondary-rgb: 36, 28, 24;  /* #241C18 */
  --c-surface-rgb:      48, 36, 32;  /* #302420 — cards/elevated panels, slightly warmer than the prior flat surface tone */
  --c-surface-nav-rgb:  43, 33, 29;  /* #2B211D — sticky/secondary nav surfaces (order.php's category nav) */
  --c-text-primary-rgb: 243, 236, 228; /* #F3ECE4 */
  --c-text-secondary-rgb: 189, 175, 158; /* #BDAF9E — was a 60-72% alpha derivation before; now this exact solid tone, brighter than the old ~60% (which read as "too dim") */
  --c-accent-rgb:        198, 162, 103; /* #C6A267 — the new interactive accent, replaces burgundy in that role everywhere */
  --c-accent-hover-rgb:  215, 180, 122; /* #D7B47A */
  --c-accent-pressed-rgb: 174, 134, 74; /* #AE864A */
  --c-text-on-accent-rgb: 36, 26, 22;   /* #241A16 — dark text for on top of the gold accent fill */
  --c-price-rgb:         213, 181, 122; /* #D5B57A — slightly more emphasis than the general accent color, prices only */
  --c-icon-hover-rgb:    228, 197, 142; /* #E4C58E — icon hover only, distinct from --accent-hover */
  --c-emerald-rgb:  79, 175, 143;    /* recovered success green — unchanged, stays in its existing role */
  --c-danger-rgb:   215, 115, 125;   /* unchanged, stays in its existing role (see prior pass's own note: brightened from 201,93,104, which tested at 4.17:1 on dark, below the 4.5:1 AA floor) */

  --color-burgundy: rgb(var(--c-burgundy-rgb));
  --color-beige:    rgb(var(--c-text-primary-rgb));    /* the "always-light" role — text/borders that must stay light regardless of surrounding surface. Value refined from #E8E0D4 to #F3ECE4 in this pass. */
  --color-gold:     rgb(var(--c-accent-rgb));           /* unified with --accent-primary -- one gold used consistently for icons/headings/buttons/nav, not a separate "decorative" shade */
  --color-cream:    rgb(var(--c-bg-main-rgb));          /* kept name for compatibility -- the base page-background role */
  --color-ink:      rgb(var(--c-bg-main-rgb));          /* same value, clearer name */
  --color-white:    rgb(var(--c-surface-rgb));          /* kept name for compatibility -- inputs/small elevated fills now share --surface's value. See payment.php's .receipt-paper for the one deliberate, hardcoded exception. */

  --bg-main:        rgb(var(--c-bg-main-rgb));
  --bg-secondary:   rgb(var(--c-bg-secondary-rgb));
  --surface:         rgb(var(--c-surface-rgb));
  --surface-nav:     rgb(var(--c-surface-nav-rgb));
  --accent-primary: rgb(var(--c-accent-rgb));
  --accent-hover:   rgb(var(--c-accent-hover-rgb));
  --accent-pressed: rgb(var(--c-accent-pressed-rgb));
  --text-on-accent: rgb(var(--c-text-on-accent-rgb));   /* dark text for on top of any gold fill (buttons, active tabs/pills) */
  --price-color:    rgb(var(--c-price-rgb));
  --icon-color:     var(--accent-primary);
  --icon-hover:     rgb(var(--c-icon-hover-rgb));
  --secondary-btn-fill:  #332824;
  --secondary-btn-hover: #40302B;

  --text-primary:   rgb(var(--c-text-primary-rgb));
  --text-secondary: rgb(var(--c-text-secondary-rgb));
  --text-muted:     var(--text-secondary);              /* was a 60%-alpha beige derivation; collapsed into the one --text-secondary tone per this pass's brief (both "descriptions" and "faded labels" read as the same too-dim issue) */
  --text-faded:     var(--text-secondary);               /* was a separate 72%-alpha derivation; same collapse */
  --text-disabled:  rgba(var(--c-text-primary-rgb), 0.35);
  --text-on-brand:  var(--color-beige);                  /* text on a solid burgundy fill -- still needed for the handful of contexts burgundy keeps (delete/critical only) */
  --text-premium:   var(--color-gold);
  --text-success:   rgb(var(--c-emerald-rgb));
  --text-danger:    rgb(var(--c-danger-rgb));

  --border-hairline: rgba(var(--c-accent-rgb), 0.12);    /* was beige-tinted; now gold-tinted per this pass -- "row dividers... currently near-invisible" */
  --border-standard: rgba(var(--c-accent-rgb), 0.20);
  --border-strong:   rgba(var(--c-accent-rgb), 0.32);
  --border-brand:    var(--accent-primary);
  --border-gold:     var(--accent-primary);
  --border:          rgba(var(--c-accent-rgb), 0.12);
  --border-secondary-btn: rgba(var(--c-accent-rgb), 0.30);

  --surface-card: var(--surface);
  --shadow-card:    0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-card-lg: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.35); /* subtle lift on hover, no bright glow -- paired with a translateY(-4px), applied only to elements that already had card styling */

  --focus-ring: 0 0 0 3px rgba(var(--c-accent-rgb), 0.4);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-body:    'Inter', sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-body-ar:    'Tajawal', sans-serif;
  --font-display-ar: 'Amiri', serif;

  --text-size-xs:   0.6875rem;
  --text-size-sm:   0.8125rem;
  --text-size-base: 0.9375rem;
  --text-size-md:   1.0625rem;
  --text-size-lg:   1.25rem;
  --text-size-xl:   1.625rem;
  --text-size-2xl:  2rem;
  --text-size-3xl:  2.5rem;
  --text-size-display: 3rem;

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

  --line-height-tight: 1.15;
  --line-height-base: 1.5;
  --letter-spacing-eyebrow: 0.08em;
  --letter-spacing-wide: 0.03em;

  /* ============================================================
     SPACING (4px base unit) — unchanged scale, not color-specific
     ============================================================ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;
  --space-10: 4.5rem;

  /* ============================================================
     BORDER RADIUS — unchanged scale
     ============================================================ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ============================================================
     BORDERS
     ============================================================ */
  --border-width-hairline: 1px;
  --border-width-standard: 1px;
  --border-width-strong: 1.5px;
  --border-style: solid;

  /* ============================================================
     MOTION
     ============================================================ */
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

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

  /* ============================================================
     Z-INDEX LAYERS
     ============================================================ */
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
  --z-ambient-halo: 80; /* above header/cards -- the cursor halo must render on top to be visible */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* Base page styling every hub page shares -- dark ink background, beige text.
 * "Midnight Bordeaux" pass: the flat --color-cream fill becomes a two-layer
 * gradient (a soft burgundy glow near the top-left, over a near-black
 * vertical wash) -- reuses --c-burgundy-rgb, the existing brand-identity
 * primitive, at low alpha, rather than introducing a new color. No
 * background-attachment: fixed -- these are mobile-first pages and a fixed
 * background can jank on scroll on iOS Safari; a gradient painted once over
 * the whole (tall) body reads the same visually either way since it isn't
 * viewport-relative content. Opaque card/surface backgrounds (--surface,
 * --surface-card, the translucent header) sit on top and are unaffected;
 * payment.php's .receipt-paper stays its own hardcoded exception regardless. */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 27% 18%, rgba(var(--c-burgundy-rgb), 0.40), transparent 48%),
    linear-gradient(180deg, #170F10 0%, #100B0C 55%, #0A0708 100%);
  background-color: var(--color-cream); /* fallback for browsers without gradient support */
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: var(--font-body-ar); }

/* ================================================================
   Ambient cursor halo -- a small, soft light that follows the native
   cursor across all 6 hub pages. Single shared body::after pseudo-element
   (defined once here, not duplicated per page); --halo-x/--halo-y are set
   in px directly from clientX/clientY by the pointermove listener in
   site-header.php's shared script (custom properties are written on
   `body`, since JS can't target a pseudo-element directly -- they inherit
   down to body::after, which reads them). Deliberately renders on top of
   content (fixed, high z-index, pointer-events: none) since it's meant to
   be visible as a glow around the literal cursor position, not a
   background wash -- see the page-level card/pill spotlight below for
   that different, behind-content technique.
   Fine-pointer devices only; hidden while the pointer is outside the
   window (--halo-opacity toggled by mouseenter/mouseleave on the shared
   script); disabled entirely under prefers-reduced-motion. No
   requestAnimationFrame -- one direct custom-property write per
   pointermove event, same as the dashboard's own proven technique. */
@media (hover: hover) and (pointer: fine) {
  body {
    --halo-x: 50vw;
    --halo-y: 50vh;
    --halo-opacity: 0;
  }
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-ambient-halo);
    pointer-events: none;
    background: radial-gradient(circle 34px at var(--halo-x) var(--halo-y), rgba(var(--c-accent-rgb), 0.16), transparent 70%);
    opacity: var(--halo-opacity);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ================================================================
   Generic pill spotlight -- reuses the exact technique already proven on
   the HQ dashboard (dashboard/assets/components.css's .kpi-card/
   .module-card treatment): --mouse-x/--mouse-y set per-element by the
   shared script on mousemove, --spotlight-alpha as a real animatable
   custom property (via @property) so only the glow's strength transitions,
   not the element's own opacity. One shared .spot-pill class applied to
   every pill-shaped interactive control across all 6 pages (nav tabs,
   language switch, category tabs, cart/control buttons) instead of
   repeating this block per page or per element type. Subtler than the
   dashboard's own 0.05 alpha, per this pass's brief. Fine-pointer devices
   only; the element's own existing hover/active/selected styling
   (background swap to --accent-primary etc.) is untouched -- this only
   adds a soft gold glow layer on top of whatever the element already does. */
@property --spotlight-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@media (hover: hover) and (pointer: fine) {
  /* Glow lives on a ::after pseudo-element, not the pill's own
     background-image -- every pill sets its own fill via the `background`
     shorthand (e.g. `.hub-tab { background: var(--surface-nav); }`,
     declared later in the document than this rule), and that shorthand
     implicitly resets background-image to `none` even when only the color
     is intended to change. A pseudo-element's own background is
     independent of the host element's, so it can't be clobbered the same
     way regardless of what each page's own CSS does. Confirmed via a real
     hover simulation during verification -- the original same-element
     approach silently rendered nothing. */
  .spot-pill {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
  }
  .spot-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    --spotlight-alpha: 0;
    background-image: radial-gradient(
      circle at var(--mouse-x) var(--mouse-y),
      rgba(var(--c-accent-rgb), var(--spotlight-alpha)),
      transparent 55%
    );
    transition: --spotlight-alpha var(--duration-fast) var(--ease-standard);
  }
  .spot-pill:hover::after, .spot-pill:focus-visible::after {
    --spotlight-alpha: 0.03;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spot-pill::after { transition: none; }
}