/* ==========================================================================
   tokens.css — Design tokens da casa Avalon Azevedo
   Identidade visual: editorial, minimalista, linhas finas, muito espaço.
   Uso:  <link rel="stylesheet" href="/css/tokens.css">
   ========================================================================== */

:root {
  /* --- Cores base ------------------------------------------------------- */
  --ja-bg: #F5F1EA;          /* fundo off-white quente */
  --ja-paper: #FFFFFF;       /* papel / cartões */
  --ja-ink: #0F1419;          /* tinta charcoal principal */
  --ja-ink-soft: #3A3F44;    /* texto secundário */
  --ja-ink-mute: #616468;    /* texto terciário / legendas (5.28:1 sobre o fundo) */

  /* --- Acentos ---------------------------------------------------------- */
  --ja-teal: #0E5B6E;        /* acento principal (teal) */
  --ja-teal-deep: #0A4655;   /* teal escuro (hover) */
  --ja-teal-soft: #E8F1F2;   /* fundo teal muito claro */
  --ja-bronze: #B8956A;      /* acento secundário / dourado (bordas, filetes) */
  --ja-bronze-soft: #F3EBDD;
  --ja-bronze-deep: #7E623E; /* bronze escuro — texto sobre fundo claro (5.04:1) */
  --ja-bronze-btn: #8F6C3E;  /* bronze para preenchimento de botão (branco 4.79:1) */

  /* --- Aliases de compatibilidade (consumidos pelo JS e CSS inline) ----- */
  --ja-navy: #0E5B6E;        /* Historically "navy" = teal principal */
  --ja-accent: #B8956A;      /* Historically "accent" = bronze */
  --ja-border: #E3DED4;      /* linha fina padrão sobre fundo quente */
  --ja-muted: #525866;       /* texto secundario sobre fundo claro */
  --ja-card: var(--ja-paper);

  /* --- Estados ---------------------------------------------------------- */
  --ja-success: #15803D;
  --ja-success-soft: #F0FDF4;
  --ja-danger: #B91C1C;
  --ja-danger-soft: #FEF2F2;
  --ja-warning: #B45309;
  --ja-warning-soft: #FFFBEB;
  --ja-info: #1D4ED8;
  --ja-info-soft: #EFF6FF;

  /* --- Tipografia ------------------------------------------------------- */
  --ja-font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ja-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ja-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ja-fs-xs: 11.5px;
  --ja-fs-sm: 12.5px;
  --ja-fs-base: 14px;
  --ja-fs-md: 15px;
  --ja-fs-lg: 18px;
  --ja-fs-xl: 22px;
  --ja-fs-2xl: clamp(24px, 3.5vw, 35px);

  --ja-lh-tight: 1.25;
  --ja-lh-base: 1.5;
  --ja-lh-loose: 1.65;

  --ja-ls-wide: 0.08em;
  --ja-ls-mono: 0.04em;

  /* --- Espaçamento (escala de 4px) --------------------------------------- */
  --ja-sp-1: 4px;
  --ja-sp-2: 8px;
  --ja-sp-3: 12px;
  --ja-sp-4: 16px;
  --ja-sp-5: 20px;
  --ja-sp-6: 24px;
  --ja-sp-7: 32px;
  --ja-sp-8: 44px;
  --ja-sp-9: 64px;
  --ja-sp-10: 96px;

  /* --- Raios ------------------------------------------------------------ */
  --ja-radius-xs: 4px;
  --ja-radius-sm: 6px;
  --ja-radius-md: 8px;
  --ja-radius-lg: 12px;
  --ja-radius-pill: 99px;

  /* --- Sombras (muito ténues, estilo editorial) -------------------------- */
  --ja-shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04);
  --ja-shadow-sm: 0 2px 8px rgba(15, 20, 25, 0.04);
  --ja-shadow-md: 0 4px 14px rgba(15, 20, 25, 0.06);
  --ja-shadow-lg: 0 8px 28px rgba(15, 20, 25, 0.09);

  /* --- Layout ----------------------------------------------------------- */
  --ja-container: 1120px;
  --ja-container-narrow: 960px;
  --ja-container-wide: 1320px;
  --ja-nav-h: 62px;

  /* --- Movimento -------------------------------------------------------- */
  --ja-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ja-dur-fast: 0.12s;
  --ja-dur: 0.18s;

  /* --- Acessibilidade --------------------------------------------------- */
  --ja-focus-ring: 0 0 0 3px rgba(14, 91, 110, 0.35);
  --ja-tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ja-dur-fast: 0.01ms;
    --ja-dur: 0.01ms;
  }
}