/* Integrativ design tokens
   Mundo: "Receituário" (papel, tinta, violeta de carimbo) sobre a estrutura padrão de software clínico.
   Fonte única de verdade para cores, tipografia, espaço, raio, sombra e movimento.
   Tema claro em :root; escuro via [data-theme="dark"] (mockups), .dark (app React) ou preferência do sistema. */

:root {
  /* ---------- Cor: base ---------- */
  --color-ground: #F5F6F9;          /* fundo da aplicação */
  --color-surface: #FFFFFF;         /* painéis, folhas */
  --color-surface-sunken: #F0F2F6;  /* bolha do médico, campos de leitura */
  --color-rail: #ECEFF8;            /* trilho de navegação: papel azulado */
  --color-overlay: rgba(23, 25, 46, 0.36);

  /* ---------- Cor: tinta (texto) ---------- */
  --color-ink: #17192E;             /* texto principal */
  --color-ink-muted: #565A70;       /* texto secundário (6.8:1) */
  --color-ink-subtle: #6B6F85;      /* datas, placeholder (4.9:1) */
  --color-ink-on-primary: #FFFFFF;

  /* ---------- Cor: linhas ---------- */
  --color-line: #E2E5EE;            /* filetes de painel */
  --color-line-strong: #CDD1DE;     /* separadores de ênfase */
  --color-border-input: #8B90A5;    /* borda de campo (3.2:1) */

  /* ---------- Cor: violeta de carimbo (ação, seleção, citação) ---------- */
  --color-primary: #4A3DC9;         /* 7.5:1 sobre branco */
  --color-primary-hover: #3D31B0;
  --color-primary-pressed: #33299A;
  --color-primary-soft: #ECEAFB;    /* fundo de item selecionado */
  --color-primary-soft-ink: #3A2FA8;
  --color-focus: #4A3DC9;

  /* ---------- Cor: estados ---------- */
  --color-attention: #F2C230;       /* receita amarela: atenção, nunca decoração */
  --color-attention-soft: #FDF3D1;
  --color-attention-ink: #6B4E00;
  --color-danger: #B42318;
  --color-danger-soft: #FDECEA;
  --color-success: #1F7A4D;
  --color-success-soft: #E6F4EC;

  /* ---------- Tipografia ---------- */
  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-caption: 0.78125rem;   /* 12.5px */
  --text-small: 0.84375rem;     /* 13.5px */
  --text-body: 0.9375rem;       /* 15px  */
  --text-reading: 1rem;         /* 16px: anamnese e respostas da IA */
  --text-h4: 1.125rem;          /* 18px */
  --text-h3: 1.25rem;           /* 20px */
  --text-h2: 1.5rem;            /* 24px */
  --text-h1: 1.875rem;          /* 30px */
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --leading-reading: 1.62;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-heading: -0.01em;
  --tracking-caps: 0.06em;

  /* ---------- Espaço (base 4px) ---------- */
  --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 ---------- */
  --radius-control: 6px;   /* botões, campos, abas */
  --radius-panel: 10px;    /* painéis, folhas, diálogos */
  --radius-pill: 999px;    /* selos, avatares */

  /* ---------- Sombra (deslocada e suave; filetes fazem o resto) ---------- */
  --shadow-1: 0 1px 2px rgba(23, 25, 46, 0.06), 0 1px 1px rgba(23, 25, 46, 0.04);
  --shadow-2: 0 10px 28px -8px rgba(23, 25, 46, 0.22), 0 2px 6px rgba(23, 25, 46, 0.08);

  /* ---------- Movimento ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Layout ---------- */
  --rail-width: 232px;
  --assistant-width: 420px;
  --history-width: 280px;
  --header-height: 64px;
  --reading-measure: 72ch;
  --control-height: 38px;
  --control-height-sm: 32px;

  color-scheme: light;
}

/* ---------- Tema escuro: consultório à noite ---------- */
:root[data-theme="dark"],
:root.dark {
  --color-ground: #0F1020;
  --color-surface: #171A2E;
  --color-surface-sunken: #1F2239;
  --color-rail: #13152A;
  --color-overlay: rgba(5, 6, 15, 0.6);
  --color-ink: #ECEDF5;
  --color-ink-muted: #ADB0C6;
  --color-ink-subtle: #9195AE;
  --color-ink-on-primary: #0F1020;
  --color-line: #2A2E48;
  --color-line-strong: #383D5C;
  --color-border-input: #6A6F90;
  --color-primary: #9B93F5;
  --color-primary-hover: #B0AAF8;
  --color-primary-pressed: #C3BEFA;
  --color-primary-soft: #262350;
  --color-primary-soft-ink: #CFCBFB;
  --color-focus: #B0AAF8;
  --color-attention: #F2C230;
  --color-attention-soft: #3A3010;
  --color-attention-ink: #F6D872;
  --color-danger: #F58A80;
  --color-danger-soft: #3B1A1A;
  --color-success: #6BCB97;
  --color-success-soft: #14301F;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light):not(.dark) {
    --color-ground: #0F1020;
    --color-surface: #171A2E;
    --color-surface-sunken: #1F2239;
    --color-rail: #13152A;
    --color-overlay: rgba(5, 6, 15, 0.6);
    --color-ink: #ECEDF5;
    --color-ink-muted: #ADB0C6;
    --color-ink-subtle: #9195AE;
    --color-ink-on-primary: #0F1020;
    --color-line: #2A2E48;
    --color-line-strong: #383D5C;
    --color-border-input: #6A6F90;
    --color-primary: #9B93F5;
    --color-primary-hover: #B0AAF8;
    --color-primary-pressed: #C3BEFA;
    --color-primary-soft: #262350;
    --color-primary-soft-ink: #CFCBFB;
    --color-focus: #B0AAF8;
    --color-attention: #F2C230;
    --color-attention-soft: #3A3010;
    --color-attention-ink: #F6D872;
    --color-danger: #F58A80;
    --color-danger-soft: #3B1A1A;
    --color-success: #6BCB97;
    --color-success-soft: #14301F;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}