/* =========================================================================
   DESIGN TOKENS — PCK InfoTec
   Mundo visual: "planta baixa noturna" — precisão de desenho técnico
   sobre preto-azulado, com azul elétrico e ciano de instrumento.
   Todo valor de cor/tipografia/espaço nasce aqui.
   ========================================================================= */

:root {
  /* ---------- Cor: substrato ---------- */
  --ink-950: #02040a;
  --ink-900: #04070e;
  --ink-850: #060a14;
  --ink-800: #080e1a;
  --ink-750: #0b1322;
  --ink-700: #0e1829;

  /* ---------- Cor: azul (identidade) ---------- */
  --blue-800: #0b2a8a;
  --blue-700: #1443c9;
  --blue-600: #1f5cff;
  --blue-500: #3f7cff;
  --blue-400: #6fa2ff;
  --cyan-500: #1fd4f2;
  --cyan-400: #5ce7ff;
  --cyan-300: #a5f2ff;

  /* ---------- Cor: sinais (apoio, com intenção) ---------- */
  --green-500: #17c976;
  --green-400: #2ee08c;
  --green-300: #7cf3ba;
  --red-500: #e5384a;
  --red-400: #ff5768;
  --red-300: #ff97a1;

  /* ---------- Cor: texto ---------- */
  --text: #eef4ff;          /* 17.9:1 sobre ink-900 */
  --text-2: #c2d0e4;        /* 12.4:1 */
  --text-3: #93a5bf;        /* 7.4:1  */
  --text-4: #71839e;        /* 4.9:1  — mínimo para corpo pequeno */

  /* ---------- Cor: linhas e superfícies ---------- */
  --line: rgba(150, 180, 224, 0.13);
  --line-2: rgba(150, 180, 224, 0.22);
  --line-3: rgba(150, 180, 224, 0.34);
  --line-blue: rgba(63, 124, 255, 0.34);
  --panel: rgba(10, 18, 33, 0.72);
  --panel-solid: #0a1220;
  --panel-2: #0c1626;
  --panel-3: #101c30;
  --wash: rgba(31, 92, 255, 0.08);

  /* ---------- Tipografia ---------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-2xs: 0.6875rem;   /* 11px — anotações técnicas */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.8125rem;    /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md: 1.0625rem;    /* 17px — corpo */
  --fs-lg: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 2vw, 1.625rem);
  --fs-2xl: clamp(1.75rem, 3vw, 2.375rem);
  --fs-3xl: clamp(2.125rem, 4.2vw, 3.25rem);
  --fs-4xl: clamp(2.5rem, 5.4vw, 4.25rem);
  --fs-display: clamp(2.6875rem, 6.1vw, 5.5rem);

  --lh-tight: 0.98;
  --lh-snug: 1.08;
  --lh-title: 1.14;
  --lh-body: 1.62;
  --ls-display: -0.035em;
  --ls-title: -0.025em;
  --ls-mono: 0.14em;

  /* ---------- Espaço (escala 4) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;
  --s-10: 96px;
  --s-11: 128px;

  --section-y: clamp(72px, 9vw, 132px);
  --gut: clamp(20px, 4.6vw, 48px);
  --wrap: 1280px;
  --wrap-narrow: 880px;

  /* ---------- Forma e profundidade ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                  0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, 0.85),
                  0 2px 0 rgba(255, 255, 255, 0.05) inset;
  --glow-blue: 0 18px 60px -24px rgba(31, 92, 255, 0.75);
  --glow-green: 0 16px 44px -20px rgba(23, 201, 118, 0.6);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* ---------- Camadas ---------- */
  --z-sheet: 0;
  --z-content: 1;
  --z-head: 60;
  --z-nav: 70;
  --z-float: 80;
  --z-toast: 90;
}

/* Contraste alto opcional do sistema */
@media (prefers-contrast: more) {
  :root {
    --text-3: #b6c5da;
    --text-4: #a3b4cb;
    --line: rgba(150, 180, 224, 0.26);
    --line-2: rgba(150, 180, 224, 0.4);
  }
}