/* =====================================================================
   Glass · tokens da marca (direção A · Lâmina)
   Um extra do Edit Like Me. Fechado em 05/11.

   Como usar: copie este arquivo e a pasta fontes/ para dentro da peça,
   lado a lado (as fontes são lidas por caminho relativo: fontes/…).
   Sem build e sem nada da internet.

   Tema: o escuro é o principal e vale sem nada no <html>.
   - <html data-tema="claro">  força o claro
   - <html data-tema="escuro"> força o escuro
   - sem data-tema: segue o sistema (prefers-color-scheme)
   Contraste conferido por teste.mjs (AA) nos dois temas.
   ===================================================================== */

/* ---------- fontes (OFL, licenças em fontes/) ---------- */
@font-face { font-family: "Geist"; src: url("fontes/Geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fontes/Geist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fontes/Geist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Geist Mono: só o 400 está no disco. O peso 500 cai no 400 até o Felipe decidir trazer o arquivo. */
@font-face { font-family: "Geist Mono"; src: url("fontes/GeistMono-400.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fontes/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fontes/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- o que não muda com o tema ---------- */
:root {
  /* famílias */
  --glass-fonte-texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glass-fonte-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --glass-fonte-nome: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* sempre itálico: nome e títulos curtos */

  /* tamanhos (tamanho / altura de linha) */
  --glass-tipo-mini: 10.5px;     --glass-tipo-mini-linha: 1.3;     /* status em mono: AO VIVO · 67 ms */
  --glass-tipo-pequeno: 12px;    --glass-tipo-pequeno-linha: 1.4;  /* painel do Premiere, rótulos */
  --glass-tipo-base: 14px;       --glass-tipo-base-linha: 1.5;     /* interface */
  --glass-tipo-corpo: 16px;      --glass-tipo-corpo-linha: 1.55;   /* texto corrido, página do celular */
  --glass-tipo-titulo: 20px;     --glass-tipo-titulo-linha: 1.2;   /* nome no painel */
  --glass-tipo-grande: 32px;     --glass-tipo-grande-linha: 1.05;  /* nome no instalador */
  --glass-tipo-destaque: 56px;   --glass-tipo-destaque-linha: 0.98;
  --glass-tipo-rastreio-mono: 0.02em;
  --glass-tipo-rastreio-assinatura: 0.15em; /* “UM EXTRA DO EDIT LIKE ME” */
  --glass-peso-normal: 400;
  --glass-peso-medio: 500;
  --glass-peso-forte: 600;

  /* raios */
  --glass-raio-premiere: 4px; /* campos dentro do painel do Premiere */
  --glass-raio-1: 8px;
  --glass-raio-2: 12px;
  --glass-raio-3: 16px;
  --glass-raio-4: 20px;
  --glass-raio-icone: 22.8%;  /* ícone do app (21 / 92) */
  --glass-raio-pilula: 999px;

  /* espaçamentos (grade de 4) */
  --glass-esp-1: 4px;
  --glass-esp-2: 8px;
  --glass-esp-3: 12px;
  --glass-esp-4: 16px;
  --glass-esp-5: 24px;
  --glass-esp-6: 32px;
  --glass-esp-7: 48px;
  --glass-esp-8: 64px;

  /* movimento */
  --glass-dur-instante: 90ms;   /* toque, troca de estado */
  --glass-dur-rapida: 160ms;    /* hover, aparecer controle */
  --glass-dur-media: 240ms;     /* esconder controles, painel */
  --glass-dur-lenta: 420ms;     /* entrada do vídeo */
  --glass-dur-pulso: 2400ms;    /* ponto ao vivo */
  --glass-curva-saida: cubic-bezier(0.22, 1, 0.36, 1);       /* entra e assenta */
  --glass-curva-entrada: cubic-bezier(0.55, 0, 1, 0.45);     /* sai */
  --glass-curva-troca: cubic-bezier(0.65, 0, 0.35, 1);       /* de um estado a outro */
  --glass-curva-pulso: ease-in-out;

  /* vidro (controles por cima do vídeo) */
  --glass-vidro-desfoque: 14px;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-dur-instante: 0ms;
    --glass-dur-rapida: 0ms;
    --glass-dur-media: 0ms;
    --glass-dur-lenta: 0ms;
    --glass-dur-pulso: 0ms; /* 0 = sem pulso: o ponto fica aceso */
  }
}

/* ---------- tema escuro (principal) ---------- */
:root,
:root[data-tema="escuro"] {
  --glass-fundo: #08090a;
  --glass-superficie-1: #111214;   /* cartão, painel */
  --glass-superficie-2: #17191c;   /* campo, item em hover */
  --glass-superficie-3: #1f2226;   /* menu aberto, item ativo */

  --glass-texto-1: #f5f5f3;        /* principal */
  --glass-texto-2: #b4b8be;        /* apoio */
  --glass-texto-3: #8a9099;        /* legenda, assinatura */

  --glass-linha: rgba(255, 255, 255, 0.08);
  --glass-linha-forte: rgba(255, 255, 255, 0.15);

  --glass-luz: #5aa2ff;            /* acento: símbolo, link, foco */
  --glass-gelo: #99c8ff;           /* números (atraso), reflexo, símbolo no ícone */
  --glass-ao-vivo: #78d9b0;
  --glass-aviso: #f2c14e;
  --glass-erro: #ff8a7f;
  --glass-foco: #5aa2ff;

  --glass-sobre-luz: #08090a;      /* texto em botão de luz */
  --glass-botao: #f5f5f3;          /* botão principal (Ativar) */
  --glass-sobre-botao: #0c0d0f;

  --glass-vidro-fundo: rgba(8, 9, 10, 0.38);
  --glass-vidro-borda: rgba(160, 200, 255, 0.18);
  --glass-vidro-luz: rgba(16, 28, 64, 0.45);  /* botão em vidro com luz (Ligar som) */
  --glass-brilho: radial-gradient(120% 90% at 50% 120%, rgba(42, 92, 240, 0.35), transparent 60%);

  --glass-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --glass-sombra-2: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --glass-sombra-3: 0 30px 60px -25px rgba(0, 0, 0, 0.7);
  --glass-anel-foco: 0 0 0 2px var(--glass-fundo), 0 0 0 4px var(--glass-foco);

  color-scheme: dark;
}

/* ---------- tema claro ---------- */
:root[data-tema="claro"] {
  --glass-fundo: #f3f5f8;
  --glass-superficie-1: #ffffff;
  --glass-superficie-2: #eceff4;
  --glass-superficie-3: #e2e6ec;

  --glass-texto-1: #0c0d0f;
  --glass-texto-2: #4e5560;
  --glass-texto-3: #5f656e;

  --glass-linha: rgba(12, 13, 15, 0.1);
  --glass-linha-forte: rgba(12, 13, 15, 0.18);

  --glass-luz: #2a5cf0;
  --glass-gelo: #c9dcff;           /* no claro o gelo é só preenchimento, nunca texto */
  --glass-ao-vivo: #137a52;
  --glass-aviso: #8a5a00;
  --glass-erro: #c4302b;
  --glass-foco: #2a5cf0;

  --glass-sobre-luz: #ffffff;
  --glass-botao: #0c0d0f;
  --glass-sobre-botao: #f5f5f3;

  --glass-vidro-fundo: rgba(255, 255, 255, 0.55);
  --glass-vidro-borda: rgba(42, 92, 240, 0.18);
  --glass-vidro-luz: rgba(201, 220, 255, 0.6);
  --glass-brilho: radial-gradient(120% 90% at 50% 120%, rgba(42, 92, 240, 0.16), transparent 60%);

  --glass-sombra-1: 0 1px 2px rgba(12, 13, 15, 0.08);
  --glass-sombra-2: 0 12px 32px -12px rgba(12, 13, 15, 0.18);
  --glass-sombra-3: 0 30px 60px -25px rgba(12, 13, 15, 0.28);
  --glass-anel-foco: 0 0 0 2px var(--glass-fundo), 0 0 0 4px var(--glass-foco);

  color-scheme: light;
}

/* claro pelo sistema, quando a peça não força um tema (mesmos valores do bloco acima) */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --glass-fundo: #f3f5f8;
    --glass-superficie-1: #ffffff;
    --glass-superficie-2: #eceff4;
    --glass-superficie-3: #e2e6ec;
    --glass-texto-1: #0c0d0f;
    --glass-texto-2: #4e5560;
    --glass-texto-3: #5f656e;
    --glass-linha: rgba(12, 13, 15, 0.1);
    --glass-linha-forte: rgba(12, 13, 15, 0.18);
    --glass-luz: #2a5cf0;
    --glass-gelo: #c9dcff;
    --glass-ao-vivo: #137a52;
    --glass-aviso: #8a5a00;
    --glass-erro: #c4302b;
    --glass-foco: #2a5cf0;
    --glass-sobre-luz: #ffffff;
    --glass-botao: #0c0d0f;
    --glass-sobre-botao: #f5f5f3;
    --glass-vidro-fundo: rgba(255, 255, 255, 0.55);
    --glass-vidro-borda: rgba(42, 92, 240, 0.18);
    --glass-vidro-luz: rgba(201, 220, 255, 0.6);
    --glass-brilho: radial-gradient(120% 90% at 50% 120%, rgba(42, 92, 240, 0.16), transparent 60%);
    --glass-sombra-1: 0 1px 2px rgba(12, 13, 15, 0.08);
    --glass-sombra-2: 0 12px 32px -12px rgba(12, 13, 15, 0.18);
    --glass-sombra-3: 0 30px 60px -25px rgba(12, 13, 15, 0.28);
    color-scheme: light;
  }
}