/* public_html/assets/css/variables.css
 * Design tokens. Every other stylesheet reads from these — never
 * hardcode a color/radius/shadow value elsewhere.
 */

:root {
  /* Accent (Emerald — locked) */
  --accent: #3FBF7F;
  --accent-deep: #2E9E68;
  --accent-light: #59D89A;

  /* Seasonal alternate accent (Royal Violet) — swapped in by
     [data-theme~="festival-violet"] below, set from control.clickcrazy.in's
     Theme page (site-wide, not per user). */
  --accent-violet: #6A1B9A;

  /* Surface + text — LIGHT (default) */
  --bg: #FAFAF8;
  --bg-orb-1: rgba(63, 191, 127, 0.18);
  --bg-orb-2: rgba(89, 216, 154, 0.14);
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-border: rgba(20, 24, 26, 0.08);
  --card-highlight: rgba(255, 255, 255, 0.9);
  --text: #14181A;
  --text-muted: #5B6462;
  --header-bg: rgba(255, 255, 255, 0.7);

  /* Radii */
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-pill: 999px;

  /* Layout */
  --announcement-height: 36px; /* shared by .announcement-bar and .site-header's sticky offset */
  --header-stack-height: 150px; /* announcement bar + header row + tagline banner combined — sticky sidebars (filters, cart/checkout summary) anchor below this, not a guessed pixel value */

  /* Shadows — soft, layered, never a single flat drop shadow */
  --shadow-card:
    0 1px 2px rgba(20, 24, 26, 0.04),
    0 8px 24px rgba(20, 24, 26, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-glow-accent: 0 8px 20px rgba(63, 191, 127, 0.25);

  /* Type */
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* `~=` (whitespace-list match) instead of an exact match, so data-theme can
   carry two independent tokens at once — e.g. data-theme="dark festival-violet" —
   without the mode token and the festival token stomping each other. */
[data-theme~="dark"] {
  --bg: #0E1512;
  --bg-orb-1: rgba(63, 191, 127, 0.22);
  --bg-orb-2: rgba(46, 158, 104, 0.16);
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.10);
  --card-highlight: rgba(255, 255, 255, 0.12);
  --text: #EDEFEE;
  --text-muted: #9BA6A3;
  --header-bg: rgba(14, 21, 18, 0.7);

  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow-accent: 0 8px 24px rgba(63, 191, 127, 0.35);
}

/* Festival: Royal Violet — swaps ONLY the accent-related variables, same
   glass treatment otherwise (per project spec: "same glass treatment,
   swap variables only"). Works layered on top of either light or dark
   mode since it matches its own token independently via `~=`, and this
   block is declared after [data-theme~="dark"] so it wins the cascade for
   the accent vars in either mode. */
[data-theme~="festival-violet"] {
  --accent: var(--accent-violet);
  --accent-deep: #4A148C;
  --accent-light: #9C4DCC;
  --bg-orb-1: rgba(106, 27, 154, 0.18);
  --bg-orb-2: rgba(156, 77, 204, 0.14);
  --shadow-glow-accent: 0 8px 20px rgba(106, 27, 154, 0.28);
}

/* Coupon line wraps to 2 lines on narrow screens, so both the bar itself
   and anything that sticks below the whole header stack need to account
   for the extra height. */
@media (max-width: 560px) {
  :root {
    --announcement-height: 54px;
    --header-stack-height: 160px;
  }
}