/* ============================================================
   BRConnect — Tokens do Design System
   ============================================================

   Mesma paleta do sistema interno (`apps/web/src/app/globals.css`):
   oklch, Inter, raio 0.75rem e a escala de sombras. O site e o ERP
   são a mesma marca — se os dois divergirem, quem usa os dois no
   mesmo dia percebe na hora.

   O tema tem TRÊS estados, e é por isso que cada token aparece três
   vezes:

     1. `:root`                      → claro, o padrão;
     2. `prefers-color-scheme: dark` → segue o sistema operacional,
        mas protegido por `:not([data-theme="light"])`, senão quem
        escolheu claro à mão volta para o escuro ao mudar o SO;
     3. `[data-theme="dark"]`        → a escolha explícita no botão,
        que precisa vencer o SO nos dois sentidos.

   Nenhuma cor pode ter sua ÚNICA definição dentro de um bloco de
   media query: sem o valor em `:root`, o navegador que não casa
   nenhuma das condições fica sem cor nenhuma.
   ============================================================ */

:root {
  color-scheme: light;

  --background: oklch(1 0 0);
  --foreground: oklch(0.2077 0.0398 265.7549);
  --surface: oklch(0.9842 0.0034 247.8575);
  --surface-strong: oklch(0.9683 0.0069 247.8956);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2077 0.0398 265.7549);

  --primary: oklch(0.6231 0.188 259.8145);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.9514 0.025 236.8242);
  --primary-soft-foreground: oklch(0.5 0.1193 242.749);

  --muted: oklch(0.9683 0.0069 247.8956);
  --muted-foreground: oklch(0.5544 0.0407 257.4166);
  --border: oklch(0.9288 0.0126 255.5078);
  --ring: oklch(0.6231 0.188 259.8145);

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1.25rem;

  --shadow-sm: 0 4px 10px 0 hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0 4px 10px 0 hsl(0 0% 0% / 0.05), 0 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0 4px 10px 0 hsl(0 0% 0% / 0.05), 0 4px 6px -1px hsl(0 0% 0% / 0.05);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --tracking-tight: -0.02em;

  --container: 75rem;
  --header-h: 4.5rem;
}

/* Segue o sistema operacional — exceto se a pessoa escolheu claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --background: oklch(0.1729 0.0102 264);
    --foreground: oklch(0.8607 0.0118 264);
    --surface: oklch(0.139 0.0102 264);
    --surface-strong: oklch(0.2208 0.0124 264);
    --card: oklch(0.2208 0.0124 264);
    --card-foreground: oklch(0.91 0.01 264);

    --primary: oklch(0.69 0.145 245);
    --primary-foreground: oklch(0.1729 0.0102 264);
    --primary-soft: oklch(0.3 0.025 264);
    --primary-soft-foreground: oklch(0.91 0.01 264);

    --muted: oklch(0.2613 0.0131 264);
    --muted-foreground: oklch(0.581 0.0211 264);
    --border: oklch(0.3251 0.0153 264);
    --ring: oklch(0.69 0.145 245);

    --shadow-sm: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
    --shadow-md: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 4px 6px -1px hsl(0 0% 0% / 0.3);
  }
}

/* Escolha explícita no botão: tem de vencer o sistema operacional. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --background: oklch(0.1729 0.0102 264);
  --foreground: oklch(0.8607 0.0118 264);
  --surface: oklch(0.139 0.0102 264);
  --surface-strong: oklch(0.2208 0.0124 264);
  --card: oklch(0.2208 0.0124 264);
  --card-foreground: oklch(0.91 0.01 264);

  --primary: oklch(0.69 0.145 245);
  --primary-foreground: oklch(0.1729 0.0102 264);
  --primary-soft: oklch(0.3 0.025 264);
  --primary-soft-foreground: oklch(0.91 0.01 264);

  --muted: oklch(0.2613 0.0131 264);
  --muted-foreground: oklch(0.581 0.0211 264);
  --border: oklch(0.3251 0.0153 264);
  --ring: oklch(0.69 0.145 245);

  --shadow-sm: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.3);
  --shadow-lg: 0 8px 15px 0 hsl(0 0% 0% / 0.3), 0 4px 6px -1px hsl(0 0% 0% / 0.3);
}