/* ═══════════════════════════════════════════════════════════════════════════
   Design Tokens — Plataforma Agrônomo Digital
   Tema: claro estilo Microsoft Fluent / Office 365 (preferência registrada)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores de superfície (light) ──────────────────────────────────────── */
  --surface-0: #ffffff;
  --surface-1: #fafafa;
  --surface-2: #f3f2f1;
  --surface-3: #edebe9;
  --surface-hover: #f5f5f4;
  --surface-active: #ebe9e7;

  /* ── Bordas ───────────────────────────────────────────────────────────── */
  --border-subtle: #e1dfdd;
  --border-default: #d2d0ce;
  --border-emphasis: #a19f9d;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --text-primary: #201f1e;
  --text-secondary: #605e5c;
  --text-tertiary: #8a8886;
  --text-disabled: #a19f9d;
  --text-inverse: #ffffff;
  --text-link: #0078d4;

  /* ── Acento (usar com parcimônia — só ações/confirmações) ─────────────── */
  --accent-primary: #0078d4;        /* Microsoft blue */
  --accent-primary-hover: #106ebe;
  --accent-primary-active: #005a9e;
  --accent-secondary: #2b88d8;
  --accent-success: #107c10;
  --accent-warning: #ca5010;
  --accent-danger: #a4262c;
  --accent-info: #0078d4;

  /* ── Sombras (planas, sutis) ─────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-display-size: 28px;
  --font-h1-size: 24px;
  --font-h2-size: 20px;
  --font-h3-size: 16px;
  --font-body-size: 14px;
  --font-small-size: 12px;
  --font-caption-size: 11px;
  --line-height-tight: 1.3;
  --line-height-default: 1.5;
  --line-height-loose: 1.7;

  /* ── Pesos tipográficos ──────────────────────────────────────────────── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Espaçamento (escala 4px) ────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Raio de borda ──────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* ── Larguras / alturas de layout ─────────────────────────────────────── */
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 48px;
  --container-max: 1280px;

  /* ── Animação ────────────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ── z-index ─────────────────────────────────────────────────────────── */
  --z-sidebar: 100;
  --z-topbar: 200;
  --z-popover: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ── Dark mode (toggle) ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-0: #1f1e1d;
  --surface-1: #252423;
  --surface-2: #2d2c2b;
  --surface-3: #3b3a39;
  --surface-hover: #3b3a39;
  --surface-active: #484644;

  --border-subtle: #3b3a39;
  --border-default: #484644;
  --border-emphasis: #605e5c;

  --text-primary: #f3f2f1;
  --text-secondary: #c8c6c4;
  --text-tertiary: #a19f9d;
  --text-disabled: #797775;
  --text-link: #4cc2ff;

  --accent-primary: #4cc2ff;
  --accent-primary-hover: #62cbff;
  --accent-success: #5dc55d;
  --accent-warning: #f7976a;
  --accent-danger: #f1707b;
}