/* ============================================================
   May Coupon — Design Tokens
   Источник: docs/DESIGN.md §1
   ВНИМАНИЕ: этот файл дублируется в web/admin/styles/tokens.css.
   При правках — синхронизировать оба.
   ============================================================ */

:root {
  /* ---------- Палитра: Backgrounds ---------- */
  --c-bg:           #131212;
  --c-bg-elev-1:    #1A1919;
  --c-bg-elev-2:    #232121;
  --c-bg-elev-3:    #2C2A2A;

  /* ---------- Borders / surfaces ---------- */
  --c-border:        rgba(245, 245, 245, 0.08);
  --c-border-strong: rgba(245, 245, 245, 0.16);
  --c-overlay-glass: rgba(26, 25, 25, 0.75);

  /* ---------- Text ---------- */
  --c-text:          #FFFFFF;
  --c-text-muted:    rgba(245, 245, 245, 0.75);
  --c-text-subtle:   rgba(245, 245, 245, 0.50);
  --c-text-faint:    rgba(245, 245, 245, 0.30);

  /* ---------- Primary accent (GPTunneL orange) ---------- */
  --c-primary:        #F97316;
  --c-primary-hover:  #FB8533;
  --c-primary-active: #EA580C;
  --c-primary-soft:   rgba(249, 115, 22, 0.12);
  --c-primary-ring:   rgba(249, 115, 22, 0.30);

  /* ---------- Semantic ---------- */
  --c-success:        #22C55E;
  --c-success-soft:   rgba(34, 197, 94, 0.12);
  --c-warn:           #F59E0B;
  --c-warn-soft:      rgba(245, 158, 11, 0.12);
  --c-error:          #EF4444;
  --c-error-soft:     rgba(239, 68, 68, 0.12);
  --c-info:           #3B82F6;
  --c-info-soft:      rgba(59, 130, 246, 0.16);

  /* ---------- Лотерейные ---------- */
  --c-coupon-regular:        var(--c-primary);
  --c-coupon-regular-soft:   var(--c-primary-soft);
  --c-coupon-regular-ring:   var(--c-primary-ring);

  --c-super:                 #FF5C8A;
  --c-super-2:               #FFB547;
  --c-super-soft:            rgba(255, 92, 138, 0.12);
  --c-super-ring:            rgba(255, 92, 138, 0.30);

  /* ---------- Gradients ---------- */
  --g-super:        linear-gradient(90deg, var(--c-super) 0%, var(--c-super-2) 100%);
  --g-super-soft:   linear-gradient(135deg, rgba(255, 92, 138, 0.10), rgba(255, 181, 71, 0.10));
  --g-progress-reg: linear-gradient(90deg, var(--c-primary) 0%, #FB8533 100%);
  --g-progress-sup: linear-gradient(90deg, var(--c-super-2) 0%, var(--c-super) 100%);
  --g-bg-hero:      radial-gradient(900px 500px at 80% -10%, rgba(249, 115, 22, 0.18) 0%, transparent 60%);

  /* ---------- Typography ---------- */
  --ff-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --ff-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fz-xs:   12px;
  --fz-sm:   14px;
  --fz-md:   16px;
  --fz-lg:   18px;
  --fz-xl:   20px;
  --fz-2xl:  24px;
  --fz-3xl:  32px;
  --fz-4xl:  48px;
  --fz-hero: clamp(34px, 5.5vw, 56px);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-code:     0.15em;

  /* ---------- Spacing ---------- */
  --sp-0:    0;
  --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;
  --sp-20:  80px;

  /* ---------- Radii ---------- */
  --r-xs:    6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  /* ---------- Shadows ---------- */
  --sh-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --sh-md: 0 6px 16px 0 rgba(0, 0, 0, 0.40);
  --sh-lg: 0 12px 32px 0 rgba(0, 0, 0, 0.50);
  --sh-glow-primary: 0 0 24px 0 rgba(249, 115, 22, 0.45);
  --sh-glow-super:   0 0 28px 0 rgba(255, 92, 138, 0.50);
  --sh-inset: inset 0 1px 1px 0 rgba(0, 0, 0, 0.30);

  /* ---------- Animations ---------- */
  --t-fast:    120ms;
  --t-base:    200ms;
  --t-medium:  400ms;
  --t-slow:    700ms;
  --t-wow:    1400ms;

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --z-base:        0;
  --z-elev:       10;
  --z-sticky:    100;
  --z-toast:    1000;
  --z-overlay:  2000;
  --z-modal:    3000;
  --z-confetti: 4000;
}