/* ============================================================
   variables.css — Design Tokens
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-bg:            #0c0c0e;
  --color-sidebar:       #101013;
  --color-surface:       #18181c;
  --color-surface-hover: #1f1f24;
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-hover:  rgba(220, 20, 60, 0.4);

  --color-crimson:       #dc143c;
  --color-rose:          #e11d48;
  --color-rose-light:    #fb7185;
  --color-rose-pale:     #fda4af;
  --color-white:         #ffffff;

  /* ── Text ── */
  --text-primary:        rgba(255, 255, 255, 0.92);
  --text-secondary:      rgba(255, 255, 255, 0.45);
  --text-muted:          rgba(255, 255, 255, 0.25);
  --text-accent:         #fb7185;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Sizes ── */
  --size-xs:   0.72rem;
  --size-sm:   0.85rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.25rem;
  --size-2xl:  1.5rem;
  --size-3xl:  1.875rem;
  --size-4xl:  2.25rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Layout ── */
  --sidebar-width: 240px;

  /* ── Radii ── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── Z-index ── */
  --z-sidebar: 100;
}