:root {
  --bg-deep: #0a0a1a;
  --bg-base: #0a0a14;
  --bg-card: #1a1a2e;
  --bg-elevated: #1e1e3a;
  --bg-surface: #1c1c34;
  --bg-hover: #2a2a4a;
  --bg-panel: #0f0f1e;
  --bg-inset: #0a1420;
  --bg-dark: #1a1a1a;

  --gold: #E4AC38;
  --gold-soft: #FFCC66;
  --gold-dark: #D4940A;
  --blue: #3B82F6;
  --cyan: #06B6D4;
  --orange: #F97316;
  --purple: #8B5CF6;
  --purple-light: #a78bfa;
  --violet: #7C3AED;
  --emerald: #10B981;
  --green: #22C55E;
  --green-light: #4ade80;
  --pink: #EC4899;
  --amber: #FBBF24;
  --red: #EF4444;
  --red-light: #F87171;
  --red-soft: #fca5a5;

  --chess-primary: #2563EB;
  --chess-secondary: #F5B731;
  --ludo-primary: #8B5CF6;
  --ludo-secondary: #EC4899;
  --domino-primary: #10B981;
  --domino-secondary: #06B6D4;
  --backgammon-primary: #F59E0B;
  --backgammon-secondary: #EF4444;

  --bg-board-border: #5C3A0E;
  --bg-board-light: #3D6B1E;
  --bg-board-dark: #2D5016;
  --bg-bar-dark: #2A1800;
  --bg-bar-light: #3D2B1A;
  --bg-bearoff: #1A0E00;
  --bg-point-dark: #8B4513;
  --bg-point-dark-tip: #5C2D0A;
  --bg-point-light: #D2691E;
  --bg-point-light-tip: #A0522D;
  --bg-checker-white: #F5E6D3;
  --bg-checker-black: #2A2A2A;
  --bg-highlight: #10B981;
  --bg-selected: #FFD700;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;
  --text-light: #e2e8f0;

  --success: #34D399;
  --error: #EF4444;
  --warning: #F59E0B;
  --win: #34D399;
  --loss: #F87171;
  --info: #3B82F6;

  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-active: rgba(32,130,240,0.4);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 9999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px;

  /* ── Type scale ────────────────────────────────────────────────────────
     Fluid between a 360px phone and a 430px one. Every step has a floor:
     nothing in the product may render below --fs-xs, because 9px and 10px
     labels are not readable at arm's length on a phone. */
  --fs-xs:   clamp(11px, 3.05vw, 12px);   /* micro labels, badges, meta */
  --fs-sm:   clamp(12px, 3.4vw,  13px);   /* secondary text */
  --fs-base: clamp(14px, 3.9vw,  15px);   /* body */
  --fs-md:   clamp(15px, 4.2vw,  17px);   /* emphasis */
  --fs-lg:   clamp(17px, 4.8vw,  20px);   /* section titles */
  --fs-xl:   clamp(20px, 5.6vw,  24px);   /* screen titles */

  /* ── Controls ──────────────────────────────────────────────────────────
     44px is the documented minimum tap target on both iOS and Android.
     --tap-min is the floor every interactive control is held to. */
  --tap-min: 44px;
  --tap-comfortable: 48px;

  --font-ar: 'IBM Plex Sans Arabic', sans-serif;
  --font-lat: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(228,172,56,0.3);

  --hud-height: 56px;
  --tab-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Layout: HUD */
  --hud-avatar-size: 34px;
  --hud-avatar-border: 2px;
  --hud-icon-size: 16px;
  --hud-bell-size: 18px;
  --hud-stat-font: 14px;
  --hud-stat-gap: 16px;
  --hud-btn-size: 44px;
  --hud-badge-size: 16px;
  --hud-badge-font: 9px;
  --hud-padding-x: 16px;

  /* Layout: Tab Bar */
  --tab-icon-size: 24px;
  --tab-label-font: 11px;
  --tab-item-gap: 3px;
  --tab-item-padding-x: 12px;
  --tab-item-padding-y: 8px;
  --tab-item-min-size: 48px;

  /* Layout: Home Page */
  --home-padding: 16px;
  --home-max-width: 340px;
  --home-greeting-font: 16px;
  --home-greeting-margin: 12px;

  /* Layout: Quick Actions */
  --quick-btn-icon-size: clamp(40px, 11.5vw, 48px);
  --quick-btn-icon-radius: 12px;
  --quick-btn-icon-font: clamp(18px, 5vw, 22px);
  --quick-btn-label-font: var(--fs-xs);
  --quick-btn-gap: 8px;
  --quick-btn-padding: 6px;
  --quick-row-gap: 8px;
  --quick-row-margin: 16px;

  /* Layout: Game Tiles */
  --game-tile-radius: 18px;
  --game-tile-gap: 12px;
  --game-tile-aspect: 1.1;
  --game-tile-icon-size: clamp(44px, 12.5vw, 56px);
  --game-tile-icon-font: clamp(36px, 10.5vw, 46px);
  --game-tile-name-font: var(--fs-md);
  --game-tile-content-gap: 8px;

  /* Layout: Game Menu (Sheet) */
  --sheet-radius: 28px;
  --sheet-padding-x: 20px;
  --sheet-padding-top: 28px;
  --sheet-max-height: 75vh;
  --sheet-bg: var(--bg-panel);

  /* Layout: Menu Buttons */
  --gm-btn-padding-y: 18px;
  --gm-btn-padding-x: 16px;
  --gm-btn-gap: 14px;
  --gm-btn-radius: 16px;
  --gm-btn-margin-bottom: 10px;
  --gm-btn-icon-size: 52px;
  --gm-btn-icon-radius: 14px;
  --gm-btn-icon-font: 26px;
  --gm-btn-title-font: 17px;
  --gm-btn-sub-font: 11px;
  --gm-btn-arrow-font: 22px;

  /* Layout: Menu Chips */
  --gm-chip-padding-y: 14px;
  --gm-chip-padding-x: 8px;
  --gm-chip-gap: 4px;
  --gm-chip-radius: 12px;
  --gm-chip-font: 11px;
  --gm-chip-icon-font: 18px;
  --gm-chips-grid-gap: 8px;
  --gm-chips-margin-top: 14px;

  /* Layout: Menu Close */
  --menu-close-size: 36px;
  --menu-close-font: 20px;
  --menu-header-icon-size: 42px;
  --menu-header-icon-radius: 12px;
  --menu-header-icon-font: 22px;
  --menu-header-title-font: 22px;
  --menu-header-gap: 10px;
  --menu-header-margin: 20px;

  /* Layout: Bot Cards */
  --bot-card-avatar-size: clamp(48px, 14vw, 60px);
  --bot-card-avatar-border: 2px;
  --bot-card-name-font: var(--fs-sm);
  --bot-card-sub-font: var(--fs-xs);
  --bot-card-accent-height: 3px;
  --bot-grid-gap: 12px;
  --bot-back-btn-size: 44px;
  --bot-back-btn-font: 18px;
  --bot-title-font: 18px;
}
