/* ============================================================
   APEX ASSESSORIA — DESIGN TOKENS
   Camadas: primitivas → semânticas. Justificativas em docs/DESIGN.md.
   ============================================================ */

/* ── Fontes self-hosted (D4/K8) — subset latin, cobre PT-BR ── */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ── Primitivas: tinta (azul-carvão, nunca preto puro) ── */
  --apx-ink-950: #06080c;
  --apx-ink-900: #0a0e15;   /* base da página */
  --apx-ink-800: #111722;   /* superfície elevada */
  --apx-ink-700: #18202e;   /* superfície alta / hover */
  --apx-ink-600: #232e40;   /* bordas fortes */
  --apx-ink-500: #31405a;

  /* ── Primitivas: neutros frios de apoio ── */
  --apx-slate-400: #8792a6;
  --apx-slate-300: #a7b1c2;
  --apx-slate-200: #c6cedc;
  --apx-slate-100: #e9edf4;
  --apx-white:     #f6f8fc;

  /* ── Primitivas: acento (âmbar-brasa — energia quente) ── */
  --apx-ember-700: #c93a12;
  --apx-ember-600: #ff5a24;  /* acento principal — 6.2:1 sobre a base */
  --apx-ember-500: #ff7040;
  --apx-ember-400: #ff8b5c;  /* acento em texto pequeno — 8.4:1 */
  --apx-ember-950: #1b0c05;  /* texto sobre acento — 6:1 */

  /* ── Semânticos: superfície e texto ── */
  --surface-base:   var(--apx-ink-900);
  --surface-raised: var(--apx-ink-800);
  --surface-high:   var(--apx-ink-700);
  --surface-sunken: var(--apx-ink-950);
  --text-primary:   var(--apx-slate-100);
  --text-secondary: var(--apx-slate-300);
  --text-muted:     var(--apx-slate-400);
  --text-invert:    var(--apx-ink-900);

  --accent:          var(--apx-ember-600);
  --accent-strong:   var(--apx-ember-500);
  --accent-text:     var(--apx-ember-400);
  --accent-contrast: var(--apx-ember-950);

  --border-subtle: #1d2534;
  --border-strong: var(--apx-ink-600);
  --focus-ring:    var(--apx-ember-500);

  /* ── Tipografia (self-hosted acima; K8 resolvida) ── */
  --font-display: "Archivo", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* Escala modular ~1.25 com clamp fluido */
  --fs-hero:    clamp(2.75rem, 6.5vw, 5rem);
  --fs-display: clamp(2rem, 4vw, 3rem);
  --fs-title:   clamp(1.375rem, 2vw, 1.625rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  --lh-tight: 1.04;
  --lh-heading: 1.15;
  --lh-body: 1.7;

  --ls-display: -0.02em;
  --ls-caps: 0.14em;

  /* ── Espaço ── */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-section: clamp(5rem, 11vw, 8.5rem);

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;

  --container: 72rem;

  /* ── Motion (uma entrada orquestrada; o resto é discreto) ── */
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 760ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-apex: cubic-bezier(0.19, 1, 0.22, 1);

  --z-nav: 30;
  --z-skip: 50;
}

/* Admin: mesmos tokens, versão sóbria (Fase 5 aplica) */
[data-theme="admin"] {
  --accent: var(--apx-slate-200);
  --accent-text: var(--apx-slate-200);
}

/* Movimento reduzido mata durações (1ms preserva transitionend) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}