@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/InstrumentSans.ttf") format("truetype");
  font-display: swap;
  font-weight: 400 700;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}
:root {
  --canvas: #fafafa;
  --surface: #fff;
  --subtle: #f0f0f0;
  --ink: #202020;
  --muted: #606060;
  --line: #808080;
  --hairline: #dedede;
  --blue: #245bdb;
  --blue-hover: #1948b5;
  --blue-soft: #eaf0ff;
  --green: #176343;
  --green-soft: #e8f8ef;
  --mint: #adecc9;
  --sans: "Instrument Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --typewriter: var(--mono);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --display-size: clamp(2.25rem, 4.4vw, 4rem);
  --display-leading: 1.1;
  --display-accent-ratio: 0.92;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --duration: 160ms;
  --overlay-shadow: 0 12px 40px rgb(0 0 0 / 12%);

  /* Papeis semanticos de superficie, para que o tema escuro nao precise reatribuir
     o significado de --ink e --surface. Campo: a faixa de abertura. Invertida: as pecas
     que precisam contrastar com a leitura, como a cortina e a barra do instrumento. */
  --field: var(--mint);
  --field-ink: var(--ink);
  --field-muted: #2f5744;
  --invert-surface: var(--ink);
  --invert-ink: var(--surface);
  --invert-muted: #d0d0d0;
  --invert-line: #363636;
  --logo-filter: brightness(0);
}

/* Contratos compartilhados de superficie, layout, tipografia e movimento (spec 0012). */
:root {
  --mint-ink: #202020;
  --action-ink: #ffffff;
  --action-on-field: #1948b5;
  --action-on-invert: #8fb0ff;
  --action-invert-ink: #171918;
  --field-line: #6c9e80;
  --photo-surface: #ffffff;
  --photo-ink: #606060;
  --page-width: 1360px;
  --page-gutter: 24px;
  --panel-pad: 56px;
  --header-offset: 96px;
  --display-home: clamp(3.5rem, 6.4vw, 6rem);
  --display-home-leading: 0.99;
  --display-home-accent: 0.84;
  --body-size: 1.125rem;
  --body-leading: 1.6;
  --duration-enter: 160ms;
  --duration-exit: 120ms;
  --press-scale: 0.97;
  --glass: color-mix(in srgb, var(--surface) 64%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-edge: rgb(255 255 255 / 60%);
  --glass-blur: blur(20px) saturate(180%);
  --glass-action: var(--blue);
  --glass-solid: var(--surface);
}
@media (max-width: 900px) {
  :root {
    --page-gutter: 0px;
    --panel-pad: 24px;
  }
}