/* DARK STORE design tokens.
   The ONLY file allowed to contain raw colour values: every other stylesheet and
   template uses var(--…). Colours are measured from the logo
   (docs/study/04-design-system.md); tests check every text colour is >= 4.5:1. */

:root {
  color-scheme: dark;

  /* ---------- surfaces ---------- */
  --bg: #0A0A0A;
  --surface-1: #141414;
  --surface-2: #1C1C1C;
  --surface-3: #252525;
  --border: #2A2A2A;
  --border-strong: #3A3A3A;
  --border-hover: #4A4A4A;
  --overlay: rgba(0, 0, 0, .68);
  --header-bg: rgba(10, 10, 10, .8);
  --hairline: rgba(255, 255, 255, .06);

  /* ---------- text ---------- */
  --text: #F2F2F0;
  --text-muted: #A3A3A0;
  --text-faint: #939390;
  --silver: #E8E8E7;
  --on-strong: #0A0A0A;

  /* ---------- brand gold (main action, price, selected) ---------- */
  --gold: #FCB73B;
  --gold-hover: #FDC566;
  --gold-press: #E9A11F;
  --gold-deep: #B87A0E;
  --gold-soft: rgba(252, 183, 59, .14);
  --gold-line: rgba(252, 183, 59, .45);
  --on-gold: #0A0A0A;
  --gold-gradient: linear-gradient(135deg, #F5B52D 0%, #FDC566 100%);
  --gold-glow: 0 10px 30px -10px rgba(252, 183, 59, .5);
  --hero-glow: radial-gradient(closest-side, rgba(252, 183, 59, .2), rgba(252, 183, 59, 0));

  /* ---------- status (warning is orange, never gold) ---------- */
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, .14);
  --success-line: rgba(52, 211, 153, .4);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --danger-line: rgba(248, 113, 113, .4);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, .14);
  --info-line: rgba(96, 165, 250, .4);
  --warning: #FB923C;
  --warning-soft: rgba(251, 146, 60, .14);
  --warning-line: rgba(251, 146, 60, .4);

  /* ---------- focus ---------- */
  --ring: 0 0 0 3px rgba(252, 183, 59, .5);
  --ring-danger: 0 0 0 3px rgba(248, 113, 113, .45);

  /* ---------- depth ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 14px 32px -14px rgba(0, 0, 0, .8);
  --shadow-3: 0 24px 64px -16px rgba(0, 0, 0, .9);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .04);

  /* ---------- decorative ---------- */
  --shimmer: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 100%);
  /* a game or category without a picture: fine diagonal lines, no glow (H2) */
  --cover-art: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
               linear-gradient(180deg, #191919 0%, #0F0F0F 100%);
  /* text over a picture: dark at the bottom (tiles) or at the start side (banners) */
  --shade: linear-gradient(180deg, rgba(10, 10, 10, 0) 28%, rgba(10, 10, 10, .62) 62%, rgba(10, 10, 10, .95) 100%);
  --shade-side: linear-gradient(270deg, rgba(10, 10, 10, .95) 0%, rgba(10, 10, 10, .78) 42%, rgba(10, 10, 10, .2) 100%);
  --page-glow: radial-gradient(60% 40% at 50% 0%, rgba(252, 183, 59, .07), rgba(252, 183, 59, 0) 70%);
  /* the line under the black promo bar (H9): the logo's gold, fading at both ends */
  --gold-fade: linear-gradient(90deg, rgba(252, 183, 59, 0) 0%, rgba(252, 183, 59, .9) 50%, rgba(252, 183, 59, 0) 100%);
  /* the promo bar's ready colours (H9): silver text on each stays above 6:1 */
  --promo-red: #A61B1B;
  --promo-green: #0F5F3A;
  --promo-blue: #1E40AF;
  --promo-purple: #5B21B6;
  /* «لون خاص» in the panel's colour chips: any colour */
  --swatch-any: conic-gradient(#EF4444, #F59E0B, #22C55E, #3B82F6, #A855F7, #EF4444);
  /* a light picture under dark banner text (H9) */
  --shade-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 75%, rgba(255, 255, 255, .9) 100%);
  --shade-soft: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, .55) 100%);
  --scrim-strong: rgba(10, 10, 10, .6);
  --scrim-soft: rgba(10, 10, 10, .35);
  --scrim-light: rgba(255, 255, 255, .7);
  /* the ring around a category's round picture (H8): the logo's gold and silver */
  --ring-gold: conic-gradient(from 200deg, #FCB73B, #E8E8E7, #B87A0E, #FCB73B);
  --ring-silver: conic-gradient(from 200deg, #E8E8E7, #8C8C8A, #F5F5F4, #6E6E6C, #E8E8E7);  /* decision 63: the categories' silver frame */
  /* decision 67: a soft light passing over a flag («لمعة»), and the light on a tilted picture */
  --sheen: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  --glare: rgba(255, 246, 228, .2);

  /* ---------- type ---------- */
  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --lh-body: 1.7;
  --lh-tight: 1.3;

  /* ---------- space (4px grid) ---------- */
  --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;
  --sp-16: 64px;

  /* ---------- radius ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* soft landing: tiles rising, pictures zooming (H7) */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 650ms;

  /* ---------- layout ---------- */
  --container: 1200px;
  --header-h: 64px;
  --tabbar-h: 64px;
  --sidebar-w: 272px;
  --touch: 44px;

  /* ---------- layers ---------- */
  --z-sticky: 30;
  --z-header: 40;
  --z-nav: 50;
  --z-toast: 80;
}