/* ═══════════════════════════════════════════════════════
   AFI Design System v2 – Extended Tokens
   Light & airy palette (Stripe / Linear / Notion style).
   Loaded AFTER tokens.css so values cascade.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --color-bg-page: #f8f9fb;
  --color-bg-surface: #fff;
  --color-bg-subtle: #f1f3f5;
  --color-bg-muted: #e9ecef;

  /* ── Borders ── */
  --color-border-default: #e5e7eb;
  --color-border-subtle: #f0f0f0;

  /* ── Text ── */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-on-primary: #fff;

  /* ── Sidebar ── */
  --sidebar-width-collapsed: 60px;
  --sidebar-width-expanded: 220px;
  --sidebar-bg: #111827;
  --sidebar-text: #9ca3af;
  --sidebar-text-hover: #f9fafb;
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-divider: rgba(255, 255, 255, 0.06);

  /* ── Radii (softer) ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ── Shadows (lighter) ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.08);

  /* ── Layout ── */
  --footer-height: 0px;
  --content-padding: 2rem;
  --input-height: 40px;
}