/* theme-light.css — Tokens canónicos de la suite Phos (modo claro).
   Fuente de verdad: PHOS_FLOW/src/PhosFlow.Web/theme-light.css.
   Cada app de la suite mantiene una copia idéntica de este archivo (ver DESIGN.md).
   Los únicos valores que cada producto puede sobreescribir son los de marca
   (--accent, --accent-hover, --accent-dim, --teal, --teal-dim, --sb-avatar-bg),
   en su propio theme-accent.css cargado DESPUÉS de este archivo. */
:root {
  --sidebar-w: 244px;
  --topbar-h: 56px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  /* Paleta — monocromática (neutral / zinc) */
  --bg: #f7f7f8;
  --panel: #ffffff;
  --surface: #f4f4f5;
  --line: #e4e4e7;
  --muted: #71717a;
  --ink: #18181b;
  --ink-faint: #a1a1aa;

  --accent: #18181b;
  --accent-ink: #ffffff;
  --accent-dim: rgba(24, 24, 27, .06);
  --accent-hover: #000000;
  --teal: #18181b;
  --teal-dim: rgba(24, 24, 27, .06);
  --copper: #a9672a;
  --copper-dim: rgba(192, 111, 43, .12);
  --warning: #f59e0b;
  --warning-dim: #fff8e0;
  --danger: #dc2626;
  --danger-dim: #fee2e2;

  --success: #10b981;
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow: 0 4px 16px rgba(24, 24, 27, .06);
  --shadow-lg: 0 18px 48px rgba(24, 24, 27, .14);

  /* Sidebar — light mode: panel blanco, texto neutro */
  --sb-bg: #ffffff;
  --sb-text: #3f3f46;
  --sb-text-dim: #a1a1aa;
  --sb-active-bg: #f4f4f5;
  --sb-active-text: #18181b;
  --sb-hover: rgba(24, 24, 27, .04);
  --sb-line: #ececed;
  --sb-avatar-bg: #18181b;
  --sb-avatar-color: #ffffff;

  /* Superficies y texto secundarios (Studio, paneles) */
  --surface2: #ececee;
  --text2: #71717a;
  --accent2: #3f3f46;
  --red: #ef4444;

  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}