/* ─────────────────────────────────────────────────────────────────────────
   Vetrda — sistema de design
   Tokens primeiro. Nenhum valor mágico espalhado pelo resto do CSS.

   Paleta: azuis como cor principal, amarelo como destaque, branco como
   base. O azul carrega a identidade e a estrutura; o amarelo marca o que
   exige atenção — o dia de jogo, um aviso, o estado ativo. O amarelo é
   usado em POUCA quantidade: se aparecer em todo o lado, deixa de
   destacar seja o que for.

   Regra que evita o erro clássico do amarelo: o amarelo brilhante
   (#ffc42e) só serve para FUNDO. Texto sobre amarelo usa --c-accent-ink
   (castanho escuro). Texto colorido de amarelo em fundo claro é
   ilegível, por isso existe --c-accent-strong para esses casos.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Cor: base neutra (branco com desvio para o azul) ───────────────── */
  --c-bg:            #f4f7fc;
  --c-surface:       #ffffff;
  --c-surface-2:     #edf2fa;
  --c-surface-3:     #e0e8f5;
  --c-border:        #d8e0ef;
  --c-border-strong: #828c9c;

  --c-text:          #0b1428;   /* azul-tinta, não preto puro */
  --c-text-2:        #46536d;
  --c-text-3:        #74829c;
  --c-text-inverse:  #ffffff;

  /* ── Cor: marca e semântica ─────────────────────────────────────────── */
  --c-primary:       #1d4ed8;   /* azul real: identidade e ações */
  --c-primary-soft:  #e6eefd;
  --c-primary-dark:  #1740a8;
  --c-primary-contrast: #ffffff;

  --c-accent:        #ffc42e;   /* amarelo de destaque (FUNDO) */
  --c-accent-soft:   #fff6dc;
  --c-accent-strong: #8a6100;   /* âmbar legível como texto/ícone */
  --c-accent-ink:    #4a3400;   /* texto escuro sobre amarelo */

  --c-ok:            #0a7c55;   /* verde-esmeralda: entra na família fria */
  --c-ok-soft:       #e2f7ef;
  --c-warn:          #996000;
  --c-warn-soft:     #fff3d6;
  --c-danger:        #c6342f;
  --c-danger-soft:   #fdebea;
  --c-info:          #1d4ed8;
  --c-info-soft:     #e6eefd;
  --c-neutral:       #5e6d82;
  --c-neutral-soft:  #eef1f6;

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  /* Fonte do sistema: arranque instantâneo, aspecto nativo em cada
     plataforma. É o que os vencedores dos Apple Design Awards fazem —
     "perfectly tailored to their platform". */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
          Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica ~1.2, com passos utilizáveis em ecrã pequeno */
  --t-xs:   0.75rem;   /* 12px — etiquetas */
  --t-sm:   0.8125rem; /* 13px — texto secundário */
  --t-base: 0.9375rem; /* 15px — corpo */
  --t-md:   1.0625rem; /* 17px — corpo grande / nomes */
  --t-lg:   1.3125rem; /* 21px — títulos de secção */
  --t-xl:   1.625rem;  /* 26px — títulos de ecrã */
  --t-2xl:  2.125rem;  /* 34px — números de destaque */
  --t-3xl:  2.75rem;   /* 44px — número herói */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ── Espaço: escala de 4px ──────────────────────────────────────────── */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.25rem;  /* 20 */
  --s-6:  1.5rem;   /* 24 */
  --s-7:  2rem;     /* 32 */
  --s-8:  2.5rem;   /* 40 */
  --s-9:  3rem;     /* 48 */

  /* ── Formas ─────────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ── Elevação ───────────────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(11, 20, 40, 0.06), 0 1px 3px rgba(11, 20, 40, 0.04);
  --sh-2: 0 2px 6px rgba(11, 20, 40, 0.07), 0 1px 2px rgba(11, 20, 40, 0.05);
  --sh-3: 0 8px 24px rgba(11, 20, 40, 0.10), 0 2px 6px rgba(11, 20, 40, 0.05);
  --sh-4: 0 16px 48px rgba(11, 20, 40, 0.18), 0 4px 12px rgba(11, 20, 40, 0.08);

  /* ── Alvos de toque ─────────────────────────────────────────────────
     Material 3 recomenda 48×48dp (~9mm); a Apple 44×44pt. Nunca abaixo
     de 44. As ações críticas em campo usam 56 para margem de erro. */
  --tap-min:  44px;
  --tap:      48px;
  --tap-lg:   56px;
  --tap-xl:   64px;

  /* ── Movimento ──────────────────────────────────────────────────────
     Curto e funcional. Nada de animações que atrasem a marcação. */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:    120ms;
  --d-base:    200ms;
  --d-slow:    320ms;

  /* ── Camadas ────────────────────────────────────────────────────────── */
  --z-nav:     100;
  --z-banner:  200;
  --z-sheet:   300;
  --z-toast:   400;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --nav-h:     64px;
  --header-h:  56px;
  --content-max: 720px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top, 0px);
}

/* ── Tema escuro ────────────────────────────────────────────────────────
   Azul-noite em vez de preto: mantém a família de cor e cansa menos a
   vista num ecrã de telemóvel usado ao relento. O amarelo sobe de tom
   porque em fundo escuro o amarelo passa a ser ele próprio legível. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg:            #080f1f;
    --c-surface:       #111a2e;
    --c-surface-2:     #18243c;
    --c-surface-3:     #22304c;
    --c-border:        #26324b;
    --c-border-strong: #3a4866;

    --c-text:          #eef2fa;
    --c-text-2:        #a9b6cf;
    --c-text-3:        #7b89a4;
    --c-text-inverse:  #080f1f;

    --c-primary:       #6d9bff;
    --c-primary-soft:  #152a52;
    --c-primary-dark:  #a6c2ff;
    --c-primary-contrast: #06122c;

    --c-accent:        #ffd166;
    --c-accent-soft:   #3a2e0c;
    --c-accent-strong: #ffd166;
    --c-accent-ink:    #2a1f00;

    --c-ok:            #43d19a;
    --c-ok-soft:       #0d2c22;
    --c-warn:          #f0b95c;
    --c-warn-soft:     #33260f;
    --c-danger:        #f87171;
    --c-danger-soft:   #3a1a1d;
    --c-info:          #6d9bff;
    --c-info-soft:     #152a52;
    --c-neutral:       #94a3b8;
    --c-neutral-soft:  #1c2437;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45);
    --sh-3: 0 8px 24px rgba(0, 0, 0, 0.5);
    --sh-4: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

/* Forçar tema claro explicitamente */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] {
  color-scheme: dark;
  --c-bg:            #080f1f;
  --c-surface:       #111a2e;
  --c-surface-2:     #18243c;
  --c-surface-3:     #22304c;
  --c-border:        #26324b;
  --c-border-strong: #3a4866;
  --c-text:          #eef2fa;
  --c-text-2:        #a9b6cf;
  --c-text-3:        #7b89a4;
  --c-text-inverse:  #080f1f;
  --c-primary:       #6d9bff;
  --c-primary-soft:  #152a52;
  --c-primary-dark:  #a6c2ff;
  --c-primary-contrast: #06122c;
  --c-accent:        #ffd166;
  --c-accent-soft:   #3a2e0c;
  --c-accent-strong: #ffd166;
  --c-accent-ink:    #2a1f00;
  --c-ok:            #43d19a;
  --c-ok-soft:       #0d2c22;
  --c-warn:          #f0b95c;
  --c-warn-soft:     #33260f;
  --c-danger:        #f87171;
  --c-danger-soft:   #3a1a1d;
  --c-info:          #6d9bff;
  --c-info-soft:     #152a52;
  --c-neutral:       #94a3b8;
  --c-neutral-soft:  #1c2437;
}