/* 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);
  /* the corner of a state's card (decision 93: the order pages' state colours) */
  --success-glow: rgba(52, 211, 153, .22);  /* .22 keeps muted text on it at 4.5:1 */
  --danger-glow: rgba(248, 113, 113, .22);
  --info-glow: rgba(96, 165, 250, .22);
  --warning-glow: rgba(251, 146, 60, .24);
  --sink: rgba(10, 10, 10, .5);  /* a box sunk into a tinted card */
  /* a conversation (decision 102): one's own bubble, a warm tint of the gold; muted text on it stays 6:1 */
  --bubble-mine: #271F10;
  --bubble-mine-line: rgba(252, 183, 59, .22);

  /* ---------- 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-photo: rgba(5, 5, 5, .92);  /* decision 103: a picture viewed over the page */
  --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);

  /* decision 96, «لعبة الواجهة» on the home: the game's own picture under a dark side (the text's side, the start)
     and a dark bottom flowing into the page; a pool of gold light behind the cover; the cover's gold rim */
  --stage-side: linear-gradient(270deg, rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .8) 38%, rgba(10, 10, 10, .25) 72%, rgba(10, 10, 10, .1) 100%);
  --stage-fade: linear-gradient(180deg, rgba(10, 10, 10, .15) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, .88) 78%, #0A0A0A 100%);
  --stage-light: radial-gradient(38% 58% at 22% 52%, rgba(252, 183, 59, .26), rgba(252, 183, 59, 0) 70%);
  --stage-rim: 0 0 0 1px rgba(252, 183, 59, .6), 0 30px 80px -26px rgba(252, 183, 59, .6), 0 22px 44px -20px rgba(0, 0, 0, .95);
  /* a category without a picture: its icon in a soft pool of the logo's gold (was a flat dark square) */
  --cat-art: radial-gradient(60% 55% at 50% 42%, rgba(252, 183, 59, .2), rgba(252, 183, 59, 0) 72%),
             repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 11px),
             linear-gradient(180deg, #1B1B1B 0%, #0F0F0F 100%);
  --icon-glow: drop-shadow(0 0 16px rgba(252, 183, 59, .5));
  /* a game card under the pointer: a thin gold edge and its light */
  --skin-edge: 0 0 0 1px rgba(255, 255, 255, .05), 0 0 70px 12px rgba(0, 0, 0, .85);  /* decision 117: the column over «غلاف الكمبيوتر» */
  --card-glow: 0 18px 40px -22px rgba(252, 183, 59, .45);
  /* decision 99, «مركز الدعم»: the hero's light (gold ≤ .16 where its words sit) */
  --help-hero: radial-gradient(70% 90% at 50% 0%, rgba(252, 183, 59, .14), rgba(252, 183, 59, 0) 70%),
               linear-gradient(180deg, #151515 0%, #0E0E0E 100%);

  /* decision 97, «خلفية الموقع»: five layers fixed behind the page, in the logo's gold, silver and the gold's deep
     bronze (site.css .site.bg-<key>). Gold never passes .18 where text sits, so the faintest text (--text-faint)
     stays 4.5:1 at the brightest point; the bronze is darker and may go higher */
  --bg-aura: radial-gradient(90% 62% at 50% 6%, rgba(252, 183, 59, .18), rgba(252, 183, 59, .06) 45%, rgba(252, 183, 59, 0) 76%),
             radial-gradient(46% 46% at 100% 58%, rgba(232, 232, 231, .07), rgba(232, 232, 231, 0) 72%),
             radial-gradient(58% 52% at 0% 100%, rgba(184, 122, 14, .24), rgba(184, 122, 14, 0) 72%);
  /* «ساحة الألعاب»: a floor seen from above, its horizon at 52% of the screen: rays from the middle of the horizon
     and lines that come closer together far away (site.css .bg-arena::before), and the horizon's light (::after) */
  --bg-arena-floor: repeating-conic-gradient(from 90deg at 50% 0, rgba(252, 183, 59, 0) 0deg, rgba(252, 183, 59, .3) .25deg,
                      rgba(252, 183, 59, 0) .5deg, rgba(252, 183, 59, 0) 6deg),
                    linear-gradient(180deg, rgba(252, 183, 59, 0) 6%, rgba(252, 183, 59, .3) 6% calc(6% + 1px), rgba(252, 183, 59, 0) calc(6% + 1px), rgba(252, 183, 59, 0) 10%, rgba(252, 183, 59, .3) 10% calc(10% + 1px), rgba(252, 183, 59, 0) calc(10% + 1px), rgba(252, 183, 59, 0) 15%, rgba(252, 183, 59, .3) 15% calc(15% + 1px), rgba(252, 183, 59, 0) calc(15% + 1px), rgba(252, 183, 59, 0) 21%, rgba(252, 183, 59, .3) 21% calc(21% + 1px), rgba(252, 183, 59, 0) calc(21% + 1px), rgba(252, 183, 59, 0) 29%, rgba(252, 183, 59, .3) 29% calc(29% + 1px), rgba(252, 183, 59, 0) calc(29% + 1px), rgba(252, 183, 59, 0) 39%, rgba(252, 183, 59, .3) 39% calc(39% + 2px), rgba(252, 183, 59, 0) calc(39% + 2px), rgba(252, 183, 59, 0) 52%, rgba(252, 183, 59, .3) 52% calc(52% + 2px), rgba(252, 183, 59, 0) calc(52% + 2px), rgba(252, 183, 59, 0) 68%, rgba(252, 183, 59, .3) 68% calc(68% + 2px), rgba(252, 183, 59, 0) calc(68% + 2px), rgba(252, 183, 59, 0) 88%, rgba(252, 183, 59, .3) 88% calc(88% + 2px), rgba(252, 183, 59, 0) calc(88% + 2px));
  --bg-arena-glow: radial-gradient(58% 16% at 50% 52%, rgba(252, 183, 59, .18), rgba(252, 183, 59, 0) 72%),
                   radial-gradient(80% 34% at 50% 104%, rgba(252, 183, 59, .14), rgba(252, 183, 59, 0) 72%),
                   radial-gradient(80% 40% at 50% -6%, rgba(252, 183, 59, .09), rgba(252, 183, 59, 0) 70%);
  --fade-up: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, 0) 96%);
  --bg-carbon: radial-gradient(80% 50% at 50% 0%, rgba(252, 183, 59, .16), rgba(252, 183, 59, 0) 72%),
               radial-gradient(50% 44% at 100% 100%, rgba(184, 122, 14, .16), rgba(184, 122, 14, 0) 72%),
               repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 3px, rgba(255, 255, 255, 0) 3px 8px),
               repeating-linear-gradient(-45deg, rgba(0, 0, 0, .6) 0 3px, rgba(0, 0, 0, 0) 3px 8px),
               linear-gradient(180deg, #141414 0%, #0A0A0A 100%);
  --bg-mark-glow: radial-gradient(80% 50% at 50% 0%, rgba(252, 183, 59, .13), rgba(252, 183, 59, 0) 72%),
                  radial-gradient(70% 60% at 50% 50%, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, .8) 100%);
  --bg-mist: radial-gradient(40% 36% at 18% 14%, rgba(252, 183, 59, .18), rgba(252, 183, 59, 0) 70%),
             radial-gradient(36% 32% at 86% 32%, rgba(184, 122, 14, .26), rgba(184, 122, 14, 0) 70%),
             radial-gradient(46% 40% at 58% 88%, rgba(232, 232, 231, .08), rgba(232, 232, 231, 0) 72%),
             radial-gradient(32% 28% at 28% 64%, rgba(252, 183, 59, .12), rgba(252, 183, 59, 0) 70%),
             radial-gradient(30% 26% at 92% 86%, rgba(184, 122, 14, .18), rgba(184, 122, 14, 0) 70%);

  /* ---------- 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-15: .9375rem;  /* a conversation's words (decision 102) */
  --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;
}