/* ================================================================
   ds-tokens.css — AetherChat Design System Tokens
   Single source of truth for all CSS custom properties.
   ================================================================ */

:root {
  /* Fluent 2 reference tokens.
     These are CSS-native aliases, not a Fluent UI dependency. */
  --fluent-brand-background: #2563ff;
  --fluent-brand-background-hover: #1d4ed8;
  --fluent-brand-foreground: #1d4ed8;
  --fluent-neutral-background-1: #ffffff;
  --fluent-neutral-background-2: #f8fafc;
  --fluent-neutral-background-3: #f1f5f9;
  --fluent-neutral-stroke-1: #d8e0ea;
  --fluent-neutral-stroke-2: #e7edf5;
  --fluent-neutral-foreground-1: #111827;
  --fluent-neutral-foreground-2: #374151;
  --fluent-neutral-foreground-3: #667085;
  --fluent-focus-stroke: #2563ff;

  /* ── Brand palette ──────────────────────────────────────────── */
  --primary-600: #2563ff;
  --primary-500: #4f46e5;
  --primary-400: #7c3aed;

  /* ── Neutrals ───────────────────────────────────────────────── */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ── Semantic state colors ──────────────────────────────────── */
  --semantic-success: #22c55e;
  --semantic-warning: #f59e0b;
  --semantic-error:   #ef4444;
  --semantic-info:    #3082f6;

  /* ── Alias tokens ───────────────────────────────────────────── */
  --bg:                var(--fluent-neutral-background-2);
  --bg-secondary:      var(--fluent-neutral-background-3);
  --surface:           var(--fluent-neutral-background-1);
  --surface-hover:     #f6f9fd;
  --surface-strong:    var(--fluent-neutral-background-1);
  --surface-border:    var(--fluent-neutral-stroke-2);
  --surface-border-mid: var(--fluent-neutral-stroke-1);
  --surface-border-highlight: rgba(37, 99, 255, 0.42);

  --text-strong: var(--fluent-neutral-foreground-1);
  --text-body:   var(--fluent-neutral-foreground-2);
  --text-muted:  var(--fluent-neutral-foreground-3);

  --accent:              var(--primary-600);
  --accent-strong:       #1d4ed8;
  --accent-dim:          rgba(37, 99, 255, 0.82);
  --accent-surface:      #eef2ff;
  --accent-glow:         rgba(37, 99, 255, 0.10);
  --accent-glow-strong:  rgba(37, 99, 255, 0.20);

  /* ── Sidebar ────────────────────────────────────────────────── */
  --sidebar-bg:          #ffffff;
  --sidebar-border:      #eef1f7;
  --sidebar-text:        #1f2937;
  --sidebar-text-muted:  var(--neutral-400);
  --sidebar-link-hover:  #f5f7fa;

  /* ── State surfaces ─────────────────────────────────────────── */
  --success:         var(--semantic-success);
  --success-surface: #ecfdf3;
  --success-border:  #bbf7d0;

  --warning:         var(--semantic-warning);
  --warning-surface: #fffbeb;
  --warning-border:  #fed7aa;

  --error:         var(--semantic-error);
  --error-surface: #fef2f2;
  --error-border:  #fecaca;

  --pending:         var(--primary-400);
  --pending-surface: #f3e8ff;
  --pending-border:  #ddd6fe;

  --info:         var(--semantic-info);
  --info-surface: #eff6ff;
  --info-border:  #bfdbfe;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 1px rgba(17, 24, 39, 0.03);
  --shadow-sm:   0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:   0 4px 10px rgba(17, 24, 39, 0.07);
  --shadow-lg:   0 8px 20px rgba(17, 24, 39, 0.09);
  --shadow-xl:   0 16px 32px rgba(17, 24, 39, 0.11);
  --shadow-2xl:  0 24px 48px rgba(17, 24, 39, 0.13);
  --shadow-card: var(--shadow-sm);
  --shadow-glass: var(--shadow-md);

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-pill: 999px;

  /* Spacing and control rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --focus-ring: 0 0 0 3px rgba(37, 99, 255, 0.16);
  --button-primary-bg: var(--primary-600);
  --button-primary-bg-hover: #1d4ed8;
  --button-primary-bg-pressed: #1e40af;
  --button-secondary-bg: #ffffff;
  --button-secondary-bg-hover: #f8fafc;
  --button-secondary-border: var(--fluent-neutral-stroke-1);
  --button-danger-bg: #dc2626;
  --button-danger-bg-hover: #b91c1c;
  --card-bg: #ffffff;
  --card-bg-hover: #fbfdff;
  --card-border: var(--surface-border);
  --card-border-hover: var(--surface-border-mid);
  --dropdown-bg: #ffffff;
  --dropdown-border: var(--surface-border-mid);
  --dropdown-item-hover: #f5f8ff;
  --field-bg: #ffffff;
  --field-bg-hover: #fbfdff;
  --field-bg-disabled: #f1f5f9;
  --field-border: var(--fluent-neutral-stroke-1);
  --field-border-hover: #b8c4d4;
  --field-border-focus: var(--primary-600);
  --field-border-error: #dc2626;
  --field-error-ring: 0 0 0 3px rgba(220, 38, 38, 0.14);
  --filter-bg: #ffffff;
  --filter-border: var(--surface-border);
  --table-header-bg: #f8fafc;
  --table-row-hover: #f6f9ff;
  --table-row-selected: #eef4ff;
  --table-border: #e7edf5;
  --table-action-bg: #ffffff;
  --empty-state-bg: #fbfdff;
  --empty-state-border: #d8e0ea;
  --loading-surface: #f8fafc;
  --loading-shimmer: linear-gradient(90deg, #f1f5f9 0%, #ffffff 48%, #f1f5f9 100%);

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-width:    260px;
  --content-gutter:   24px;
  --topbar-height:    64px;

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* ── Compat stubs (used by old CSS sections) ────────────────── */
  --blur-glass:   none;
  --blur-sidebar: none;
  --bg-grid:      rgba(138, 155, 196, 0.06);
  --shadow-glow:  0 4px 12px rgba(37, 99, 255, 0.14);
}