@import url("brand-tokens.css");

@font-face {
  font-family: "Young Serif";
  src: url("/fonts/YoungSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("/fonts/Literata-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Semânticos: todos derivam dos primitivos oficiais. */
  --visor-stage: var(--s-cream);
  --visor-paper-ink: var(--s-tinta);
  --visor-paper-muted: color-mix(in srgb, var(--s-tinta) 64%, transparent);
  --visor-paper-faint: color-mix(in srgb, var(--s-tinta) 34%, transparent);
  --visor-ink: white;
  --visor-muted: color-mix(in srgb, white 58%, transparent);
  --visor-faint: color-mix(in srgb, white 30%, transparent);
  --visor-accent: var(--s-verde);
  --visor-screen: color-mix(in srgb, var(--s-dark) 96%, white);
  --visor-shell: color-mix(in srgb, var(--s-dark) 84%, white);
  --visor-shell-edge: color-mix(in srgb, white 16%, transparent);
  --visor-layer: color-mix(in srgb, var(--s-dark) 91%, white);
  --visor-shadow: color-mix(in srgb, black 60%, transparent);

  /* Componente: geometria do objeto, não tokens de marca. */
  --visor-width: 706px;
  --visor-height: 1030px;
  --visor-radius: 102px;
  --visor-bezel: 19px;
  --visor-depth: 18px;
  --visor-layer-step: 23px;
  --visor-copy-x: 70px;
  --visor-copy-y: 68px;
  --visor-perspective: 1900px;
}

.artboard[data-theme="light"] {
  --visor-ink: var(--s-tinta);
  --visor-muted: color-mix(in srgb, var(--s-tinta) 64%, transparent);
  --visor-faint: color-mix(in srgb, var(--s-tinta) 34%, transparent);
  --visor-accent: var(--s-esmeralda);
  --visor-screen: color-mix(in srgb, var(--s-cream) 96%, white);
  --visor-shell: color-mix(in srgb, var(--s-tinta) 88%, var(--s-cream));
  --visor-shell-edge: color-mix(in srgb, var(--s-cream) 24%, transparent);
  --visor-layer: color-mix(in srgb, var(--s-cream) 91%, var(--s-tinta));
  --visor-shadow: color-mix(in srgb, var(--s-tinta) 24%, transparent);
}