/* AX Consultoria · Design tokens
 * Fonte de verdade: Site/docs/DESIGN.md
 * Vocabulário cartorial:
 *   canvas    = pergaminho (fundo claro padrão)
 *   lift      = champagne (fundo claro elevado)
 *   ink-deep  = ameixa (fundo escuro institucional)
 *   ink-violet, ink-blue = alternâncias escuras
 *   accent    = bronze (fios, marcadores, hover)
 */

:root {
  /* === Cores · Brand === */
  --color-ameixa: #1F1A26;
  --color-ameixa-rgb: 31 26 38;
  --color-bronze: #9A7742;
  --color-bronze-rgb: 154 119 66;

  /* === Cores · Surface === */
  --color-pergaminho: #F5F1E8;
  --color-pergaminho-rgb: 245 241 232;
  --color-champagne: #E8DCC3;
  --color-champagne-rgb: 232 220 195;
  --color-violeta: #2B2434;
  --color-violeta-rgb: 43 36 52;
  --color-tinta: #1F2A38;
  --color-tinta-rgb: 31 42 56;

  /* === Cores · Semantic (par mínimo, calmo) === */
  --color-success: #2F6B47;
  --color-success-bg: rgb(47 107 71 / 0.08);
  --color-danger: #8C2A2A;
  --color-danger-bg: rgb(140 42 42 / 0.06);

  /* === Hairline === */
  --border-light: 1px solid rgb(var(--color-ameixa-rgb) / 0.12);
  --border-dark: 1px solid rgb(var(--color-pergaminho-rgb) / 0.16);
  --hairline-strong: rgb(var(--color-ameixa-rgb) / 0.22);

  /* === Tipografia === */
  --font-display: "Capitolina", Georgia, serif;
  --font-body: "General Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* === Espaço === */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* === Radius === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* === Elevation (mínima editorial) === */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-hover: 0 6px 18px rgb(var(--color-ameixa-rgb) / 0.08);
  --shadow-soft: 0 24px 56px rgb(var(--color-ameixa-rgb) / 0.12);

  /* === Containers === */
  --container: min(100% - 32px, 1180px);
  --container-wide: min(100% - 32px, 1320px);
  --container-text: min(100% - 32px, 860px);

  /* === Ícones === */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* === Z-index === */
  --z-header: 20;
  --z-menu: 30;
  --z-modal: 40;

  /* === Motion === */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}