/* ─────────────────────────────────────────────────────────────
   ANI-UI Design Tokens
   ─────────────────────────────────────────────────────────────
   Single source of truth for color, type, motion, radii, shadows.
   All v9-redesign pages import this file first.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Surfaces ─── */
  --bg-primary:    #0a0a0f;   /* sayfa zemin — 2. fotoğraf esinli */
  --bg-secondary:  #0d0d14;
  --bg-card:       #10101a;
  --bg-elevated:   #16161f;
  --bg-input:      rgba(255, 255, 255, 0.04);
  --bg-elite:      #1a0a14;   /* Elite kart koyu bordo-siyah */
  --bg-legendary:  #0f0a00;   /* Legendary kart amber-siyah */
  --bg-auth-left:  #0d0010;   /* Auth sol panel başlangıç */

  /* ─── Text ─── */
  --text-primary:    #ffffff;
  --text-secondary:  #a0a0b8;
  --text-muted:      #505068;
  --text-disabled:   #303040;

  /* ─── Brand ─── */
  --accent:        #e8003d;
  --accent-hover:  #c5002f;
  --accent-soft:   rgba(232, 0, 61, 0.12);
  --accent-glow:   rgba(232, 0, 61, 0.35);
  --accent-light:  #ff4466;
  --blood-dark:    #5c0a14;                    /* kan kırmızısı / koyu uç */
  --blood-deep:    #8b0000;                    /* klasik kan kırmızı */

  /* Marka gradient: açık kırmızı → kan kırmızısı (sitenin tek renk ailesi) */
  --grad-brand:    linear-gradient(135deg, #ff4466 0%, #c5002f 50%, #8b0000 100%);
  --grad-brand-soft: linear-gradient(135deg, #ff4466 0%, #8b0000 100%);

  /* ─── Tier colors (mor → kırmızı ailesi) ─── */
  --tier-founding: rgba(255, 255, 255, 0.45);  /* nötr gri */
  --tier-starter:  #ff8899;                    /* pembe-kırmızı (Elite'in hafif hali) */
  --tier-starter-light: #ffb3c1;
  --tier-elite:    var(--accent);              /* parlak kırmızı */
  --tier-elite-light: var(--accent-light);
  --tier-ultra:    #c5002f;                    /* koyu kırmızı (kan tonu) */
  --tier-ultra-light: #ff5577;
  --tier-legendary-1: #fbbf24;                 /* altın (mevcut) */
  --tier-legendary-2: #f59e0b;
  --tier-legendary-3: #dc2626;                 /* altın gradient'te kırmızı vurgu */

  /* ─── State ─── */
  --green:   #22c55e;
  --gold:    #f59e0b;
  --red:     #ef4444;

  /* ─── Border ─── */
  --border:           rgba(255, 255, 255, 0.07);
  --border-strong:    rgba(255, 255, 255, 0.14);
  --border-accent:    rgba(232, 0, 61, 0.25);
  --border-accent-strong: rgba(232, 0, 61, 0.4);

  /* ─── Radii ─── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ─── Shadows ─── */
  --shadow-card:        0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-card-hover:  0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-cta:         0 4px 14px rgba(232, 0, 61, 0.25);
  --shadow-cta-hover:   0 8px 28px rgba(232, 0, 61, 0.4),
                        0 0 0 1px rgba(232, 0, 61, 0.5);
  --shadow-modal:       0 24px 80px rgba(0, 0, 0, 0.6),
                        0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-elite:       0 20px 60px rgba(232, 0, 61, 0.18),
                        0 0 0 1px rgba(232, 0, 61, 0.3);
  --shadow-legendary:   0 0 60px rgba(245, 158, 11, 0.14),
                        0 0 120px rgba(232, 0, 61, 0.08),
                        0 24px 80px rgba(0, 0, 0, 0.5);

  /* ─── Motion ─── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.15s;
  --t-base:  0.2s;
  --t-slow:  0.4s;

  /* ─── Type scale ─── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1: clamp(32px, 4.5vw, 52px);
  --fs-h2: clamp(24px, 3vw, 36px);
  --fs-h3: 22px;
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-xs: 11px;

  /* ─── Layout ─── */
  --container: 1240px;
  --container-narrow: 880px;

  /* ─── Z-index ─── */
  --z-nav: 50;
  --z-modal-bg: 100;
  --z-modal: 101;
  --z-toast: 200;
}

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}