/* Proof · tokens da versão C (fusão A + B).
   Página clara de papel fotográfico frio; o escuro de cinema mora dentro das molduras de filme;
   o marcador vermelhão circula os leaks. Nada de creme + terracota. */

@font-face { font-family: "Switzer"; src: url("../fonts/switzer-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic-latin.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nanum Pen Script"; src: url("../fonts/nanum-pen-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("../fonts/fragment-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* cor · papel 65 / filme 25 / marcador 5 / luz fria 5 */
  --paper: #F1F2EF;     /* papel fotográfico, frio (não creme) */
  --silver: #DCDFDC;    /* faixa, superfície */
  --print: #FAFAF8;     /* cartão */
  --film: #0B0C10;      /* texto e molduras de filme */
  --graphite: #55595C;  /* texto 2 · 6,3:1 */
  --night: #131A33;     /* sombra dentro do filme */
  --frost: #A7BEDB;     /* luz fria dentro do filme */
  --marker: #F0501C;    /* lápis dermatográfico · sinal · 3,2:1 em traço/nota grande; texto escuro por cima 5,5:1 */
  --ember: #FF9A62;     /* queima de luz na borda do filme */

  --text: var(--film);
  --text-2: var(--graphite);
  --line: color-mix(in srgb, var(--film) 11%, transparent);
  --line-2: color-mix(in srgb, var(--film) 20%, transparent);

  --f-sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --f-focus: "Bodoni Moda", Didot, Georgia, serif;
  --f-hand: "Nanum Pen Script", "Bradley Hand", cursive;
  --f-mono: "Fragment Mono", ui-monospace, Menlo, monospace;

  --t-display: clamp(46px, 7.2vw, 110px);
  --t-h2: clamp(34px, 4.6vw, 64px);
  --t-h3: clamp(22px, 2.1vw, 28px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --t-hand: clamp(24px, 2.2vw, 30px);
  --t-meta: 11px;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-pill: 999px;
  --r-card: 20px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-fast: 220ms;
  --d-reveal: 900ms;
  --d-draw: 1100ms;

  --fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .24 0 0 0 .45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --sprocket: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='10'><rect x='6' y='1' width='12' height='8' rx='2'/></svg>");
}