/* DCS Rebanhos — design tokens
 *
 * A paleta não foi escolhida: foi AMOSTRADA pixel a pixel do mockup aprovado
 * (img/ChatGPT Image 21 de set. de 2026, 17_05_59 (2).png), para que a tela de
 * login renderizada seja indistinguível da imagem de referência:
 *
 *   #20422b  botão "Entrar"           -> --green-600 (primária)
 *   #112715  verde profundo à direita -> --green-800 (fundo do login)
 *   #fcfaf6  card creme               -> --cream-100
 *   #fbf9f5  interior dos campos      -> --cream-050
 *   #d7d7d5  borda dos campos         -> --neutral-300
 *   #59585d  subtítulo do card        -> base dos cinzas de texto
 *
 * Os demais degraus foram derivados dessas âncoras mantendo o matiz do verde
 * (~140° de tom) e conferindo contraste WCAG 2.2 AA (PRD UX 03): todo par
 * texto/fundo aqui definido fica em 4.5:1 ou mais, e os pares de interface
 * (bordas, foco) em 3:1 ou mais.
 *
 * Tema escuro: os mesmos papéis semânticos trocam de valor. Nenhum componente
 * conhece cor literal — todos leem as variáveis --color-*.
 */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- *
   * 1. Paleta bruta (só é lida pelos papéis semânticos do bloco 2)
   * ---------------------------------------------------------------- */
  --green-900: #0a1c0f;
  --green-800: #112715;
  --green-700: #18331f;
  --green-600: #20422b;
  --green-500: #2d5a3b;
  --green-400: #4b7d5c;
  --green-300: #86ad94;
  --green-200: #b9d2c1;
  --green-100: #dbe8de;
  --green-050: #eef4ef;

  --cream-050: #fefdfa;
  --cream-100: #fcfaf6;
  --cream-200: #f6f2ea;
  --cream-300: #ece6da;

  --neutral-000: #ffffff;
  --neutral-050: #f7f7f5;
  --neutral-100: #f0f0ed;
  --neutral-200: #e4e4e0;
  --neutral-300: #d7d7d5;
  --neutral-400: #b2b4b0;
  --neutral-500: #858884;
  --neutral-600: #646863;
  --neutral-700: #4a4f4b;
  --neutral-800: #2b302c;
  --neutral-900: #151a16;

  /* Estados. Tons terrosos para conviver com o verde da marca sem virar
   * semáforo de aplicativo genérico. */
  --success-600: #1d6b3f;
  --success-700: #14532c;
  --success-050: #e7f2ea;
  --success-200: #b7dbc4;

  --warning-600: #8a5a06;
  --warning-700: #6b4505;
  --warning-050: #fbf1de;
  --warning-200: #efd5a1;

  --danger-600: #a32626;
  --danger-700: #821d1d;
  --danger-050: #fae9e9;
  --danger-200: #eebcbc;

  --info-600: #175a80;
  --info-700: #114562;
  --info-050: #e6f0f6;
  --info-200: #b3d3e4;

  /* ---------------------------------------------------------------- *
   * 2. Papéis semânticos (o que os componentes realmente usam)
   * ---------------------------------------------------------------- */
  --color-bg: var(--neutral-050);
  --color-surface: var(--neutral-000);
  --color-surface-raised: var(--neutral-000);
  --color-surface-muted: var(--cream-200);
  --color-surface-sunken: var(--neutral-100);

  --color-border: var(--neutral-300);
  --color-border-strong: #8f918d;
  --color-border-subtle: var(--neutral-200);

  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-faint: var(--neutral-500);
  --color-text-inverse: var(--cream-100);
  --color-text-on-primary: var(--cream-050);

  --color-primary: var(--green-600);
  --color-primary-hover: var(--green-700);
  --color-primary-active: var(--green-800);
  --color-primary-subtle: var(--green-050);
  --color-primary-subtle-border: var(--green-200);
  --color-primary-text: var(--green-700);

  --color-link: var(--green-700);
  --color-link-hover: var(--green-800);

  /* Anel de foco: 3px sólidos + halo. Nunca depende só de cor — muda a
   * geometria do elemento, o que atende WCAG 2.2 "Focus Appearance". */
  --color-focus: var(--green-600);
  --color-focus-halo: rgba(32, 66, 43, 0.22);

  --color-success: var(--success-600);
  --color-success-text: var(--success-700);
  --color-success-bg: var(--success-050);
  --color-success-border: var(--success-200);

  --color-warning: var(--warning-600);
  --color-warning-text: var(--warning-700);
  --color-warning-bg: var(--warning-050);
  --color-warning-border: var(--warning-200);

  --color-danger: var(--danger-600);
  --color-danger-hover: var(--danger-700);
  --color-danger-text: var(--danger-700);
  --color-danger-bg: var(--danger-050);
  --color-danger-border: var(--danger-200);

  --color-info: var(--info-600);
  --color-info-text: var(--info-700);
  --color-info-bg: var(--info-050);
  --color-info-border: var(--info-200);

  /* Casca autenticada: barra lateral e superior em verde profundo, como o
   * lado direito do mockup. */
  --color-shell-bg: var(--green-800);
  --color-shell-bg-hover: var(--green-700);
  --color-shell-text: var(--cream-100);
  --color-shell-text-muted: var(--green-200);
  --color-shell-border: rgba(255, 255, 255, 0.12);
  --color-shell-active: var(--green-600);

  /* Tela de login */
  --color-login-veil: var(--green-800);
  --color-login-card: var(--cream-100);
  --color-login-field: var(--cream-050);
  --color-login-card-border: transparent;
  --color-login-photo-veil: transparent;
  --color-brand: var(--green-600);
  --color-success-strong: var(--success-600);

  /* ---------------------------------------------------------------- *
   * 3. Tipografia
   * ---------------------------------------------------------------- */
  /* Pilha do sistema: SEC 03 proíbe terceiros, e nenhuma fonte entra por CDN.
   * A referência visual do mockup é uma grotesca neutra, que é exatamente o
   * que system-ui entrega em Windows, macOS, Android e Linux. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo,
    Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11px — só para selos e rótulos de apoio */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px — corpo padrão da interface */
  --text-md: 1rem;        /* 16px — corpo de formulário, evita zoom no iOS */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.125rem;   /* 34px — "Acesse sua conta" */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------------------------------------------------------------- *
   * 4. Espaçamento (escala de 4px)
   * ---------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* ---------------------------------------------------------------- *
   * 5. Forma, profundidade e movimento
   * ---------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 28, 15, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 28, 15, 0.08), 0 1px 2px rgba(10, 28, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 28, 15, 0.10), 0 2px 4px rgba(10, 28, 15, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 28, 15, 0.16), 0 4px 10px rgba(10, 28, 15, 0.08);
  --shadow-card: 0 18px 48px rgba(10, 28, 15, 0.28);

  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------- *
   * 6. Medidas da casca
   * ---------------------------------------------------------------- */
  --topbar-height: 60px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px;
  --content-max: 1360px;
  --gutter: 16px;          /* respiro lateral obrigatório no mobile */
  --gutter-lg: 32px;
  --tap-target: 44px;      /* alvo mínimo de toque (WCAG 2.2 AA) */

  --z-base: 0;
  --z-sticky: 100;
  --z-topbar: 200;
  --z-drawer: 300;
  --z-overlay: 290;
  --z-toast: 400;
}

/* ------------------------------------------------------------------ *
 * Tema escuro
 * ------------------------------------------------------------------ *
 * Duas portas de entrada, com os mesmos valores:
 *   - preferência do sistema, a menos que a pessoa tenha fixado o tema claro;
 *   - escolha explícita gravada em data-theme="dark".
 * O bloco é repetido porque CSS não permite compartilhar um corpo de regra
 * entre seletores em contextos de mídia diferentes.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0e1410;
    --color-surface: #161d18;
    --color-surface-raised: #1c241e;
    --color-surface-muted: #26302a;
    --color-surface-sunken: #0b100d;

    --color-border: #4a5650;
    --color-border-strong: #66736a;
    --color-border-subtle: #313a33;

    --color-text: #e8ece8;
    --color-text-muted: #a8b2aa;
    --color-text-faint: #8a948c;
    --color-text-inverse: #101710;
    --color-text-on-primary: #f2f7f2;

    --color-primary: #3d7c53;
    --color-primary-hover: #347049;
    --color-primary-active: #2f6a45;
    --color-primary-subtle: #18271d;
    --color-primary-subtle-border: #2f4d39;
    --color-primary-text: #9fd0b0;

    --color-link: #9fd0b0;
    --color-link-hover: #bde0c8;

    --color-focus: #9fd0b0;
    --color-focus-halo: rgba(159, 208, 176, 0.26);

    --color-success: #58a97a;
    --color-success-text: #a9dcbc;
    --color-success-bg: #142a1d;
    --color-success-border: #2c5740;

    --color-warning: #d9a441;
    --color-warning-text: #eccb8c;
    --color-warning-bg: #2b2213;
    --color-warning-border: #57462a;

    --color-danger: #b94a4a;
    --color-danger-hover: #a83f3f;
    --color-danger-text: #eeb0b0;
    --color-danger-bg: #2b1616;
    --color-danger-border: #57302f;

    --color-info: #6aa7c8;
    --color-info-text: #a9cee2;
    --color-info-bg: #14222b;
    --color-info-border: #2c4757;

    --color-shell-bg: #0d1712;
    --color-shell-bg-hover: #16231a;
    --color-shell-text: #e3e9e4;
    --color-shell-text-muted: #9fb3a6;
    --color-shell-border: rgba(255, 255, 255, 0.16);
    --color-shell-active: #24462f;

    --color-login-veil: #0a1c0f;
    --color-login-card: #1c241e;
    --color-login-field: #111713;
    /* Contorno do card e véu sobre a foto: no escuro a sombra não separa
     * nada, e a foto clara ao lado de um card escuro seria a tela mais
     * clara do sistema justamente no modo escuro. */
    --color-login-card-border: #3a453d;
    --color-login-photo-veil: rgba(10, 28, 15, 0.55);
    /* Marca sobre o card escuro: --color-primary daria só 3,44:1. */
    --color-brand: #9fd0b0;
    --color-success-strong: #58a97a;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0e1410;
  --color-surface: #161d18;
  --color-surface-raised: #1c241e;
  --color-surface-muted: #26302a;
  --color-surface-sunken: #0b100d;

  --color-border: #4a5650;
  --color-border-strong: #66736a;
  --color-border-subtle: #313a33;

  --color-text: #e8ece8;
  --color-text-muted: #a8b2aa;
  --color-text-faint: #8a948c;
  --color-text-inverse: #101710;
  --color-text-on-primary: #f2f7f2;

  --color-primary: #3d7c53;
  --color-primary-hover: #347049;
  --color-primary-active: #2f6a45;
  --color-primary-subtle: #18271d;
  --color-primary-subtle-border: #2f4d39;
  --color-primary-text: #9fd0b0;

  --color-link: #9fd0b0;
  --color-link-hover: #bde0c8;

  --color-focus: #9fd0b0;
  --color-focus-halo: rgba(159, 208, 176, 0.26);

  --color-success: #58a97a;
  --color-success-text: #a9dcbc;
  --color-success-bg: #142a1d;
  --color-success-border: #2c5740;

  --color-warning: #d9a441;
  --color-warning-text: #eccb8c;
  --color-warning-bg: #2b2213;
  --color-warning-border: #57462a;

  --color-danger: #b94a4a;
  --color-danger-hover: #a83f3f;
  --color-danger-text: #eeb0b0;
  --color-danger-bg: #2b1616;
  --color-danger-border: #57302f;

  --color-info: #6aa7c8;
  --color-info-text: #a9cee2;
  --color-info-bg: #14222b;
  --color-info-border: #2c4757;

  --color-shell-bg: #0d1712;
  --color-shell-bg-hover: #16231a;
  --color-shell-text: #e3e9e4;
  --color-shell-text-muted: #9fb3a6;
  --color-shell-border: rgba(255, 255, 255, 0.16);
  --color-shell-active: #24462f;

  --color-login-veil: #0a1c0f;
  --color-login-card: #1c241e;
  --color-login-field: #111713;
  /* Contorno do card e véu sobre a foto: no escuro a sombra não separa
   * nada, e a foto clara ao lado de um card escuro seria a tela mais
   * clara do sistema justamente no modo escuro. */
  --color-login-card-border: #3a453d;
  --color-login-photo-veil: rgba(10, 28, 15, 0.55);
  /* Marca sobre o card escuro: --color-primary daria só 3,44:1. */
  --color-brand: #9fd0b0;
  --color-success-strong: #58a97a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.7);
}

/* Tema claro fixado pela pessoa: nada a sobrescrever, os valores do :root já
 * são o tema claro. O seletor existe para documentar o contrato de data-theme. */
:root[data-theme="light"] {
  color-scheme: light;
}