/* ==========================================================================
   ProArqui | Design Tokens
   Kaivor Studios . Direcao de arte e desenvolvimento
   --------------------------------------------------------------------------
   Fonte unica de verdade do sistema visual. Cor, tipografia, espacamento,
   profundidade e tempo de animacao saem daqui. Nenhum valor bruto deve ser
   escrito direto nos componentes.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  /* As quatro cores vem direto do cata-vento do logotipo da ProArqui. */
  --pa-green: #6ff178;
  --pa-cyan: #03f6eb;
  --pa-red: #e63329;
  --pa-amber: #f9b133;

  /* Versoes rebaixadas para uso em interface, onde a cor pura satura demais. */
  --pa-green-ui: #57c96a;
  --pa-cyan-ui: #43c3cd;
  --pa-red-ui: #d93a30;
  --pa-amber-ui: #edaa3c;

  /* --- Neutros ---------------------------------------------------------- */
  --ink-1000: #0d0e10;
  --ink-900: #131417;
  --ink-800: #1a1c20;
  --ink-700: #23262b;
  --ink-600: #33373e;
  --ink-500: #4c525b;
  --ink-400: #6d747f;
  --ink-300: #9aa1ac;
  --ink-200: #c7ccd4;
  --ink-100: #e6e9ee;
  --ink-050: #f2f4f7;
  --ink-000: #ffffff;

  /* --- Papeis semanticos (tema claro, padrao das secoes editoriais) ------ */
  --bg: var(--ink-000);
  --bg-soft: var(--ink-050);
  --bg-elevated: var(--ink-000);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --fg-subtle: var(--ink-400);
  --line: rgba(19, 20, 23, 0.1);
  --line-strong: rgba(19, 20, 23, 0.18);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala fluida. O clamp evita media queries so para tamanho de texto. */
  --t-xs: clamp(0.69rem, 0.66rem + 0.14vw, 0.76rem);
  --t-sm: clamp(0.81rem, 0.78rem + 0.16vw, 0.89rem);
  --t-base: clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);
  --t-md: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  --t-lg: clamp(1.25rem, 1.14rem + 0.55vw, 1.6rem);
  --t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.5rem);
  --t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem);
  --t-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 6rem);
  --t-4xl: clamp(3.2rem, 1.6rem + 7vw, 9rem);

  --lead-tight: 1.02;
  --lead-snug: 1.16;
  --lead-normal: 1.62;
  --track-tight: -0.03em;
  --track-wide: 0.18em;

  /* --- Ritmo espacial --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  /* --- Grade ------------------------------------------------------------ */
  --shell: 1320px;
  --shell-narrow: 900px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);

  /* --- Forma e profundidade --------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 14, 16, 0.06), 0 4px 12px rgba(13, 14, 16, 0.05);
  --shadow-md: 0 2px 6px rgba(13, 14, 16, 0.06), 0 16px 40px rgba(13, 14, 16, 0.09);
  --shadow-lg: 0 8px 24px rgba(13, 14, 16, 0.1), 0 40px 90px rgba(13, 14, 16, 0.16);

  /* Corte diagonal herdado do material institucional da ProArqui. */
  --cut: 12%;

  /* --- Tempo ------------------------------------------------------------ */
  --dur-fast: 0.22s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Camadas ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-menu: 70;
  --z-cursor: 90;
  --z-loader: 100;
}

/* Secoes escuras apenas trocam os papeis semanticos. Os componentes nao
   precisam saber em que tema estao. */
.is-dark {
  --bg: var(--ink-1000);
  --bg-soft: var(--ink-900);
  --bg-elevated: var(--ink-800);
  --fg: var(--ink-000);
  --fg-muted: var(--ink-300);
  --fg-subtle: var(--ink-400);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  color-scheme: dark;
}