/* Tokens da São Bernardo.
   Três camadas (primitivos, semânticos e componente), com a paleta CSB e as
   fontes Geist. Nenhuma cor fora deste arquivo. */
:root {
  color-scheme: light;

  /* ---------- primitivos: cor (padrão CSB) ---------- */
  --azul-b: #2b508a;        /* azul B: tinta e fundo escuro */
  --azul-b-fundo: #264a80;
  --azul-b-claro: #305892;
  /* azul A: sinal, foco, selo. Escurecido de #3d72bf (4,41:1) para dar 5,17:1
     sobre o fundo #f3f5f9; texto pequeno pede 4,5:1. */
  --azul-a: #3567b0;
  /* clareado de #a9c8f5: o link da vitrine passa sobre a letra fantasma
     (#305892) no tema escuro e ali ficava em 4,18:1; agora 4,63:1 */
  --azul-a-claro: #b8d2f7;
  --azul-cinza: #5c6f8f;
  --azul-cinza-claro: #c3d2ea;
  --nevoa-100: #fcfdfe;
  --nevoa-200: #f3f5f9;
  --nevoa-300: #eaeff6;
  --nevoa-400: #cdd6e3;
  --azul-linha: #44679f;
  --branco: #ffffff;

  /* ---------- primitivos: espaço (base 4) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---------- primitivos: tipografia ---------- */
  --font-sans: "Geist", "Geist Reserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Reserva", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-dado: 0.08em;
  --tracking-titulo: -0.04em;

  /* ---------- primitivos: raio, movimento ---------- */
  --radius-sm: 6px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-normal: 240ms;

  /* ---------- semânticos ---------- */
  --color-text: var(--azul-b);
  --color-text-muted: var(--azul-cinza);
  --color-surface: var(--nevoa-200);
  --color-surface-alt: var(--nevoa-100);
  --color-surface-sunken: var(--nevoa-300);
  --color-border: var(--nevoa-400);
  --color-accent: var(--azul-a);
  --color-on-accent: var(--nevoa-200);
  --color-focus: var(--azul-a);
  --color-scrim: rgb(43 80 138 / 28%);
  --color-photo-bg: var(--branco);         /* fotos com fundo branco de fábrica */
  --color-glow: rgb(255 255 255 / 90%);    /* halo atrás das fotos */
  --color-shadow: rgb(43 80 138 / 24%);   /* sombra das fotos */

  /* ---------- layout ---------- */
  --page-max: 82.5rem;
  --gutter-left: max(1.5rem, env(safe-area-inset-left, 0px));
  --gutter-right: max(1.5rem, env(safe-area-inset-right, 0px));
  --rhythm-section: clamp(var(--space-6), 6vw, var(--space-9));

  /* ---------- componente: header/nav ---------- */
  --nav-height: 4rem;
  --nav-bg: var(--color-surface);
  --nav-flyout-bg: var(--color-surface-alt);
  --nav-logo-height: 2.375rem;
}

/* Tema escuro: escolha manual do visitante (claro é o padrão). */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --color-text: var(--branco);
  --color-text-muted: var(--azul-cinza-claro);
  --color-surface: var(--azul-b);
  --color-surface-alt: var(--azul-b-fundo);
  --color-surface-sunken: var(--azul-b-claro);
  --color-border: var(--azul-linha);
  --color-accent: var(--azul-a-claro);
  --color-on-accent: var(--azul-b);
  --color-focus: var(--azul-a-claro);
  --color-scrim: rgb(12 26 50 / 50%);
  --color-glow: rgb(255 255 255 / 10%);
  --color-shadow: rgb(12 26 50 / 55%);
}

@media (max-width: 480px) {
  :root {
    --nav-logo-height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}