/* =====================================================================
   Tokens — "Caderno de oficina"
   Óculos artesanais de madeira: do Zero ao Expert · Natan Rodrigues
   Fonte única de cores, tipos, espaços, formas, sombras e movimento.
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---------- Paleta bruta (tirada da matéria) ---------- */
  --cor-papel-claro: #fbf6ee;
  --cor-papel: #f6eee2;
  --cor-kraft: #ecdcc4;
  --cor-kraft-escuro: #e2cba6;
  --cor-madeira-clara: #d9b88a;
  --cor-mel: #e6ac5f;
  --cor-mel-escuro: #8a5a14;
  --cor-terracota: #a3441c;
  --cor-terracota-escura: #84340f;
  --cor-nogueira: #2b1d15;
  --cor-nogueira-media: #3a281d;
  --cor-tinta: #2a1b12;
  --cor-tinta-suave: #5b4433;
  --cor-creme: #f4e8d7;
  --cor-creme-suave: #d9c6ae;
  --cor-musgo: #56602f;
  --cor-petroleo: #2f5560;
  --cor-vinho: #8f2a1d;

  /* Lâminas (divisores e madeiras ilustrativas) */
  --lamina-clara: #e9d2a6;
  --lamina-mel: #c98a4b;
  --lamina-avermelhada: #8e3f22;
  --lamina-escura: #3b2418;
  --lamina-verde: #41633f;
  --lamina-azul: #2f5f73;

  /* ---------- Papéis semânticos (tema "papel", padrão) ---------- */
  --fundo: var(--cor-papel);
  --fundo-elevado: var(--cor-papel-claro);
  --fundo-alternativo: var(--cor-kraft);
  --fundo-inverso: var(--cor-nogueira);
  --texto: var(--cor-tinta);
  --texto-suave: var(--cor-tinta-suave);
  --texto-inverso: var(--cor-creme);
  --texto-inverso-suave: var(--cor-creme-suave);
  --acao: var(--cor-terracota);
  --acao-hover: var(--cor-terracota-escura);
  --acao-texto: #fff8ef;
  --destaque: var(--cor-mel);
  --linha: rgba(42, 27, 18, .28);
  --linha-suave: rgba(42, 27, 18, .12);
  --linha-inversa: rgba(244, 232, 215, .3);
  --foco: var(--cor-terracota);
  --foco-inverso: var(--cor-mel);
  --sucesso: var(--cor-musgo);
  --atencao: var(--cor-mel-escuro);
  --erro: var(--cor-vinho);
  --info: var(--cor-petroleo);

  /* ---------- Tipografia ---------- */
  --fonte-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fonte-texto: "Alegreya Sans", "Gill Sans", "Segoe UI", sans-serif;
  --fonte-mao: "Caveat", "Bradley Hand", cursive;

  --tam-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);
  --tam-h2: clamp(2rem, 1.4rem + 2.6vw, 3.35rem);
  --tam-h3: clamp(1.3rem, 1.15rem + .6vw, 1.55rem);
  --tam-lead: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --tam-citacao: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --tam-texto: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --tam-pequeno: 1rem;
  --tam-legenda: .92rem;
  --tam-mao: clamp(1.45rem, 1.3rem + .5vw, 1.75rem);

  --peso-titulo: 560;
  --eixos-display: "SOFT" 100, "WONK" 1, "opsz" 144;
  --eixos-titulo: "SOFT" 100, "WONK" 0, "opsz" 72;
  --eixos-texto-serif: "SOFT" 100, "opsz" 24;
  --entrelinha: 1.6;
  --entrelinha-titulo: 1.12;

  /* ---------- Espaço ---------- */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;
  --secao: clamp(4rem, 9vw, 7.5rem);
  --largura: 1180px;
  --largura-ampla: 1280px;
  --largura-texto: 62ch;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---------- Forma ---------- */
  --raio-pilula: 999px;
  --raio-lente: 34% 38% 50% 48% / 30% 32% 70% 68%;
  --raio-seixo: 70px 110px 90px 120px / 90px 80px 110px 100px;
  --raio-suave: 28px 34px 30px 36px / 32px 28px 36px 30px;
  --raio-campo: 14px 16px 15px 17px / 16px 14px 17px 15px;
  --raio-pequeno: 10px 12px 11px 13px / 12px 10px 13px 11px;

  /* ---------- Sombra ---------- */
  --sombra: 0 1px 0 rgba(42, 27, 18, .06), 0 14px 30px -18px rgba(76, 38, 14, .45);
  --sombra-alta: 0 0 0 1px rgba(42, 27, 18, .08), 0 30px 60px -40px rgba(76, 38, 14, .6);
  --sombra-botao: inset 0 -3px 0 rgba(0, 0, 0, .16);
  --sombra-escura: 0 18px 40px -20px rgba(0, 0, 0, .7);

  /* ---------- Movimento ---------- */
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-lenta: 600ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Camadas ---------- */
  --z-topo: 20;
  --z-sobreposicao: 40;
  --z-aviso: 50;

  /* ---------- Texturas ---------- */
  --textura-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tema "oficina" (escuro) — para áreas de estudo e player na plataforma */
[data-tema="oficina"] {
  --fundo: var(--cor-nogueira);
  --fundo-elevado: var(--cor-nogueira-media);
  --fundo-alternativo: #33241a;
  --fundo-inverso: var(--cor-papel);
  --texto: var(--cor-creme);
  --texto-suave: var(--cor-creme-suave);
  --texto-inverso: var(--cor-tinta);
  --texto-inverso-suave: var(--cor-tinta-suave);
  --acao: var(--cor-mel);
  --acao-hover: #f0bd78;
  --acao-texto: var(--cor-tinta);
  --linha: rgba(244, 232, 215, .3);
  --linha-suave: rgba(244, 232, 215, .12);
  --foco: var(--cor-mel);
  --sucesso: #a9b86b;
  --atencao: var(--cor-mel);
  --erro: #e08a74;
  --info: #8fbcc6;
}