/* tokens.css — EloStore design tokens v1
   2026-05-24 — single source of truth for radius/space/color/type/elevation.
   Подключается ПЕРВЫМ во всех HTML, до styles.css */

:root {
  /* ===== RADIUS ===== */
  --r-pill: 999px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-circle: 50%;

  /* ===== SPACING (8px grid) ===== */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px; --s-11: 96px;

  /* ===== INK (тёмные фоны) ===== */
  --ink-900: #040812;
  --ink-800: #080c1a;
  --ink-700: #0b1122;
  --ink-600: #0f1626;
  --ink-500: #131a2e;

  /* ===== GOLD (brand) ===== */
  --gold-50:  #f7e6c1;
  --gold-100: #f3d298;
  --gold-200: #f0c67f;
  --gold-300: #d4af6e;
  --gold-400: #c8a15a;
  --gold-500: #b48a44;
  --gold-ink: #1a1206;

  /* ===== TEXT ===== */
  --text-100: #f7f9fd;
  --text-200: #e7ecf6;
  --text-300: rgba(241,247,253,.86);
  --text-400: rgba(241,247,253,.62);
  --text-500: rgba(241,247,253,.42);

  /* ===== SEMANTIC ===== */
  --success: #5be0a8;
  --warning: var(--gold-200);
  --danger:  #ff6b6b;
  --info:    #56c7ff;

  /* ===== BORDER ===== */
  --b-soft:   rgba(255,255,255,.06);
  --b-medium: rgba(255,255,255,.12);
  --b-gold:   rgba(243,210,152,.34);

  /* ===== ELEVATION ===== */
  --e-inner: inset 0 1px 0 rgba(255,255,255,.04);
  --e-1: 0 4px 12px rgba(0,0,0,.18);
  --e-2: 0 12px 28px rgba(0,0,0,.24);
  --e-3: 0 18px 55px rgba(0,0,0,.34);
  --e-4: 0 28px 80px rgba(0,0,0,.36);
  --e-gold: 0 16px 30px rgba(200,161,90,.22);
  --e-focus: 0 0 0 3px rgba(243,210,152,.32);

  /* ===== TYPE ===== */
  --ff: "Inter", system-ui, -apple-system, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;
  --fs-display: 56px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;

  /* ===== MOTION ===== */
  --t-fast: .15s ease;
  --t-base: .22s ease;
  --t-slow: .4s cubic-bezier(.22,.61,.36,1);

  /* ===== Z-INDEX ===== */
  --z-base: 1;
  --z-sticky: 50;
  --z-popover: 80;
  --z-modal: 90;
  --z-toast: 100;
}