/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   All design decisions live here. Change once, apply everywhere.
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-bg:           #0f0f13;
  --color-surface:      #1a1a24;
  --color-surface-2:    #22222f;
  --color-surface-3:    #2a2a3a;
  --color-border:       #2e2e40;
  --color-border-hover: #3e3e55;

  /* ── Text ── */
  --color-text:         #e8e8f0;
  --color-text-muted:   #7878a0;
  --color-text-subtle:  #50506a;

  /* ── Brand ── */
  --color-accent:       #7c6af7;
  --color-accent-2:     #c084fc;
  --color-accent-glow:  rgba(124, 106, 247, 0.25);

  /* ── Semantic ── */
  --color-success:      #34d399;
  --color-success-bg:   rgba(52, 211, 153, 0.12);
  --color-success-border: rgba(52, 211, 153, 0.3);

  --color-danger:       #f87171;
  --color-danger-bg:    rgba(248, 113, 113, 0.12);
  --color-danger-border: rgba(248, 113, 113, 0.3);

  --color-warning:      #fbbf24;

  /* ── Leitner Box Colors ── */
  --color-box-1:        #f87171;
  --color-box-2:        #fb923c;
  --color-box-3:        #fbbf24;
  --color-box-4:        #34d399;
  --color-box-5:        #60a5fa;

  /* ── Typography ── */
  --font-family:        'Vazirmatn', sans-serif;
  --font-size-xs:       0.7rem;
  --font-size-sm:       0.8rem;
  --font-size-base:     0.9rem;
  --font-size-md:       1rem;
  --font-size-lg:       1.2rem;
  --font-size-xl:       1.5rem;
  --font-size-2xl:      2rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  /* ── Spacing Scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --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-accent: 0 4px 20px rgba(124, 106, 247, 0.35);

  /* ── Transitions ── */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --container-max-width: 920px;
  --header-height: 72px;
}