/* ============================================================
   AETHER SOCIAL — DESIGN TOKENS
   ============================================================ */

:root {
  /* ── Brand Palette ── */
  --c-white:       #ffffff;
  --c-surface:     #f7f8fa;
  --c-surface-2:   #f0f2f5;
  --c-border:      #e4e7ed;
  --c-border-2:    #d1d5dc;

  --c-text-primary:   #0f1117;
  --c-text-secondary: #4b5563;
  --c-text-muted:     #9ca3af;

  --c-accent:         #2563eb;   /* vibrant blue */
  --c-accent-light:   #eff6ff;
  --c-accent-hover:   #1d4ed8;
  --c-accent-2:       #0ea5e9;   /* sky — used sparingly */

  --c-success:   #16a34a;
  --c-warning:   #d97706;
  --c-danger:    #dc2626;
  --c-online:    #22c55e;

  /* ── Typography ── */
  --font-sans:    'DM Sans',          sans-serif;
  --font-display: 'DM Serif Display', serif;

  --text-xs:   0.70rem;    /* 11px */
  --text-sm:   0.813rem;   /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  --lh-tight:  1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

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

  /* ── Radii ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(15,17,23,.04);
  --shadow-sm:  0 2px 6px rgba(15,17,23,.06), 0 1px 2px rgba(15,17,23,.04);
  --shadow-md:  0 4px 16px rgba(15,17,23,.08), 0 2px 4px rgba(15,17,23,.04);
  --shadow-lg:  0 8px 32px rgba(15,17,23,.10), 0 2px 8px rgba(15,17,23,.04);
  --shadow-xl:  0 16px 48px rgba(15,17,23,.12);
  --shadow-accent: 0 4px 14px rgba(37,99,235,.22);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-fast:    120ms;
  --t-normal:  220ms;
  --t-slow:    380ms;

  /* ── Layout ── */
  --nav-h:       64px;
  --sidebar-w:   280px;
  --content-max: 780px;
  --page-max:    1280px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}