:root {
  /* Tipografia */
  --font: 'Mona Sans', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(3.25rem, 1.2rem + 6.4vw, 7rem);

  /* Espaço */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --max: 1240px;

  /* Raios por nível: o destaque é mais redondo que o cartão, que é mais que o controle */
  --r-control: 12px;
  --r-card: 20px;
  --r-feature: 28px;

  --on-brasa: #000000;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tema escuro: o padrão. `.keep-dark` são os objetos que continuam escuros no tema claro
   (a bancada da forja, as telas de app e o cartão metal), como o celular escuro numa página clara. */
:root,
.keep-dark {
  color-scheme: dark;

  /* Paleta (ver DESIGN.md). Os nomes são papéis: fundo, cartão, borda, texto. */
  --noite: #000000;
  --ferro: #121316;
  --aco: #1f2126;
  --aco-claro: #2c2f36;
  --giz: #ececee;
  --nevoa: #8b8e96;
  --brasa: #ff5b1f;
  --brasa-forte: #ff7a45;
  --incandescente: #ffc56b;

  --superficie-alta: #17181c;
  --superficie-baixa: #0b0c0e;
  --veu: rgb(0 0 0 / 0.82);
  --lavagem: rgb(255 255 255 / 0.04);
  --lavagem-forte: rgb(255 255 255 / 0.08);
  --brilho: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --sombra-curta: 0 12px 24px -16px rgb(0 0 0 / 0.9);
  --sombra-longa: 0 30px 60px -30px rgb(0 0 0 / 0.9);
  --foto-base: rgb(0 0 0 / 0.55);

  /* Profundidade em três níveis */
  --depth-card:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 1px 2px rgb(0 0 0 / 0.6),
    0 24px 48px -24px rgb(0 0 0 / 0.9);
  --depth-feature:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 0 rgb(0 0 0 / 0.5),
    0 2px 4px rgb(0 0 0 / 0.6),
    0 40px 90px -30px rgb(255 91 31 / 0.38);
}

.keep-dark {
  color: var(--giz);
}

/* Tema claro: papel frio e cartões brancos; a brasa continua sendo a ação. */
[data-theme='light'] {
  color-scheme: light;

  --noite: #f4f4f6;
  --ferro: #ffffff;
  --aco: #e8e9ec;
  --aco-claro: #d4d6db;
  --giz: #101114;
  --nevoa: #5d616a;
  --brasa-forte: #c23b08;
  --incandescente: #a85600;

  --superficie-alta: #ffffff;
  --superficie-baixa: #f7f7f9;
  --veu: rgb(244 244 246 / 0.82);
  --lavagem: rgb(16 17 20 / 0.04);
  --lavagem-forte: rgb(16 17 20 / 0.08);
  --brilho: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --sombra-curta: 0 12px 24px -16px rgb(16 17 20 / 0.28);
  --sombra-longa: 0 30px 60px -30px rgb(16 17 20 / 0.3);
  --foto-base: rgb(0 0 0 / 0.12);

  --depth-card:
    inset 0 0 0 1px rgb(16 17 20 / 0.06),
    0 1px 2px rgb(16 17 20 / 0.06),
    0 24px 48px -28px rgb(16 17 20 / 0.22);
}