/* Fontes: Bahnschrift quando instalada (Windows), Barlow como substituta da mesma família DIN. */
@font-face {
  font-family: "PUCPR Display";
  src: local("Bahnschrift Bold SemiCondensed"), local("Bahnschrift-BoldSemiCondensed"),
    url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "PUCPR Head";
  src: local("Bahnschrift Bold"), local("Bahnschrift-Bold"), url("../fonts/barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "PUCPR Head";
  src: local("Bahnschrift SemiBold"), local("Bahnschrift-SemiBold"), url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Cores PUCPR (PDF "cores"), cada uma com seu papel */
  --bg: #f0f0f0;            /* canvas claro */
  --ink: #1e1e1e;           /* texto e seções escuras */
  --surface: #ffffff;       /* cards sobre o canvas */
  --surface-dark: #262626;  /* cards sobre seção escura */
  --accent: #ff024b;        /* só CTA, foco e estado ativo */
  --accent-hover: #a20136;  /* hover do CTA e links em texto */
  --accent-subtle: #ffe5ed; /* fundo de tag ativa */
  --data-1: #6f2166;        /* visualização de dados */
  --data-2: #9654ff;        /* visualização de dados */
  --success: #39a201;
  --warning: #d38700;
  --error: #eb0004;

  --muted: #595959;         /* 6.4:1 sobre #f0f0f0 */
  --muted-dark: #b3b3b3;    /* 7.6:1 sobre #1e1e1e */
  --line: #d4d4d4;
  --line-strong: #858585;   /* 3.2:1 para bordas interativas */
  --line-dark: #3a3a3a;
  --ghost-line: rgb(248 248 248 / 0.12); /* Julia Krantz: costuras de 1px */
  --ash: #a3a3a3;                        /* Kirschberg: texto secundário no escuro */

  /* Tipografia (PDF "tipografias"): H2 40/44, H3 24/28, corpo 16/22 */
  --font-display: "PUCPR Display", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-head: "PUCPR Head", "Barlow", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "Consolas", monospace;

  --text-display: clamp(3rem, 1.2rem + 7.4vw, 8.5rem);
  --text-h2: 2.5rem;
  --lh-h2: 2.75rem;
  --text-h3: 1.5rem;
  --lh-h3: 1.75rem;
  --text-body: 1rem;
  --lh-body: 1.375rem;
  --text-lead: 1.1875rem;
  --text-mono: 0.8125rem;

  /* Espaço e forma (Waabi: seções 96px, cards 12px, botões pill) */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section: clamp(4rem, 2.5rem + 6vw, 6rem);
  --max: 1280px;
  --radius-card: 12px;
  --radius-frame: clamp(24px, 1rem + 3vw, 64px);
  --radius-pill: 999px;
  --radius-surface: 24px;                         /* Kirschberg: superfícies */
  --radius-media: clamp(24px, 1rem + 3vw, 56px);  /* KeepGrading: mídia flutuante */

  /* Motion (refero-design/references/motion.md) */
  --duration-fast: 120ms;
  --duration-default: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-arrive: cubic-bezier(0.22, 0.61, 0.36, 1); /* Julia Krantz: só para transform */
  --duration-image: 400ms;                         /* Julia Krantz: filtro de imagem */
  --motion-distance-md: 8px;
  --motion-distance-lg: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-default: 0ms;
    --duration-slow: 100ms;
    --motion-distance-md: 0px;
    --motion-distance-lg: 0px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-h2: 2rem;
    --lh-h2: 2.25rem;
  }
}