/* ============================================================
   AXIS DESIGN SYSTEM — TOKENS
   Fonte única de verdade (Single Source of Truth)

   Alterar valores aqui atualiza automaticamente:
   - styleguide.html (reflexo visual)
   - Qualquer projeto que importe este arquivo
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLORS — Primary (Cerulean / Pacific Blue)
     -------------------------------------------------------- */
  --color-primary: #0891A8;
  --color-primary-variant: #4DB8D0;



  /* --------------------------------------------------------
     COLORS — Neutral Dark (warm-teal tinted)
     -------------------------------------------------------- */
  --color-bg-dark: #0D1112;
  --color-text-primary: #0D1112;
  --color-text-secondary: #5D686D;
  --color-text-tertiary: #919A9E;
  --color-text-auxiliary: #6E7A7E;

  /* --------------------------------------------------------
     COLORS — Neutral Light (warm, Parchment-derived)
     -------------------------------------------------------- */
  --color-bg-surface: #FCFDFE;
  --color-bg-card: #F6F8FA;
  --color-bg-icon-on-dark: #F0F3F5;
  --color-border-subtle: #E7ECF1;
  --color-border-hover: #E1E4E8;
  --color-border-default: #DFE3E8;
  --color-border-input: #CFD4DA;
  --color-border-input-strong: #CFD4DA;
  --color-border-aux: #D5DADE;

  /* --------------------------------------------------------
     COLORS — With Opacity
     -------------------------------------------------------- */
  --color-primary-8: rgba(14, 127, 153, 0.08);
  --color-primary-0: rgba(14, 127, 153, 0);
  --color-grey-10: rgba(100, 110, 115, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-13: rgba(255, 255, 255, 0.13);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-black-0: rgba(0, 0, 0, 0);
  --color-primary-15: rgba(8, 145, 168, 0.15);

  /* --------------------------------------------------------
     COLORS — State (feedback visual)
     -------------------------------------------------------- */
  --color-error: #E04545;
  --color-error-bg: rgba(224, 69, 69, 0.08);
  --color-success: #2DA562;
  --color-success-bg: rgba(45, 165, 98, 0.08);
  --color-warning: #E5A100;
  --color-warning-bg: rgba(229, 161, 0, 0.08);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59, 130, 246, 0.08);

  /* --------------------------------------------------------
     TYPOGRAPHY — Font Families
     -------------------------------------------------------- */
  --font-family-primary: 'DM Sans', sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', sans-serif;
  --font-family-secondary: 'Helvetica', sans-serif;
  /* Monospace — para meta bar, eyebrows, tags, captions técnicas,
     rótulos de valores (INCLUSO, 01/04, v2.0). Contraste técnico/minimalista. */
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------
     TYPOGRAPHY — Font Weights
     -------------------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* --------------------------------------------------------
     TYPOGRAPHY — Font Sizes
     -------------------------------------------------------- */
  --font-size-display: 80px;
  --font-size-h2: 45.9px;
  --font-size-h5-lg: 23.4px;
  --font-size-h5-md: 22.7px;
  --font-size-h5-sm: 22.3px;
  --font-size-h6: 18.6px;
  --font-size-body-lg: 17.2px;
  --font-size-h3: 16.9px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-size-caption-sm: 11.1px;

  /* --------------------------------------------------------
     TYPOGRAPHY — Line Heights
     -------------------------------------------------------- */
  --line-height-display: 92px;
  --line-height-h2: 52.8px;
  --line-height-h5: 36px;
  --line-height-h6: 30px;
  --line-height-body-lg: 28.8px;
  --line-height-h3: 28px;
  --line-height-body: 25.6px;
  --line-height-body-sm: 22.4px;
  --line-height-caption: 18px;
  --line-height-caption-sm: 14px;

  /* --------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
     -------------------------------------------------------- */
  --letter-spacing-display: -2.55px;
  --letter-spacing-h2: -0.96px;
  --letter-spacing-h5: -0.72px;
  --letter-spacing-h3: -0.54px;
  --letter-spacing-h6: -0.2px;
  --letter-spacing-body-lg: 0.36px;
  --letter-spacing-none: 0px;

  /* --------------------------------------------------------
     SPACING
     -------------------------------------------------------- */
  --spacing-5: 5px;
  --spacing-xs: 8px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* --------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------- */
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 4px;
  --radius-circle: 50%;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */
  --shadow-card:
    0px 2px 6px -4px rgba(13, 17, 18, 0.14),
    0px 4.199px 2.1px -0.625px rgba(13, 17, 18, 0.02),
    0px 9.952px 4.976px -1.25px rgba(13, 17, 18, 0.02),
    0px 18.154px 9.077px -1.875px rgba(13, 17, 18, 0.02),
    0px 30.181px 15.091px -2.5px rgba(13, 17, 18, 0.015),
    0px 48.74px 24.37px -3.125px rgba(13, 17, 18, 0.01),
    0px 79.783px 39.892px -3.75px rgba(13, 17, 18, 0.01);

  /* --------------------------------------------------------
     GRADIENTS
     -------------------------------------------------------- */
  --gradient-hero-title: linear-gradient(to right, var(--color-bg-surface), var(--color-primary) 95%);
  --gradient-dotted-tag: linear-gradient(0.07deg, var(--color-primary-8) 0%, var(--color-grey-10) 100%);
  --gradient-blue-line: linear-gradient(to right, var(--color-primary-0) 0%, var(--color-primary-variant) 50%, var(--color-primary-0) 100%);
  --gradient-shadow-top: linear-gradient(to bottom, var(--color-bg-dark), var(--color-black-0));
  --gradient-shadow-bottom: linear-gradient(to bottom, var(--color-black-0), var(--color-bg-dark));
  --gradient-primary-to-variant: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-variant) 100%);
  --gradient-dark-teal: linear-gradient(135deg, var(--color-bg-dark) 0%, #0A3D4A 50%, var(--color-primary) 100%);
  --gradient-surface-glow: linear-gradient(180deg, var(--color-bg-card) 0%, var(--color-bg-surface) 50%, var(--color-bg-card) 100%);

  /* --------------------------------------------------------
     EFFECTS — Backdrop Blur
     -------------------------------------------------------- */
  --blur-lg: 5px;
  --blur-md: 2.5px;
  --blur-sm: 1.25px;
  --blur-none: 0px;

  /* --------------------------------------------------------
     EFFECTS — Opacity
     -------------------------------------------------------- */
  --opacity-full: 1;
  --opacity-60: 0.6;
  --opacity-50: 0.5;

  /* --------------------------------------------------------
     EFFECTS — Stroke / Border Width
     -------------------------------------------------------- */
  --stroke-default: 1px;
  --stroke-thick: 3px;

  /* --------------------------------------------------------
     ICONS — Padrao de estilo
     Todos os SVGs: stroke-linecap="square", stroke-linejoin="miter"
     Nunca usar "round" em linecap ou linejoin.
     -------------------------------------------------------- */

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */
  --container-max: 1440px;
  --container-viewport: 1720px;

  /* --------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------- */
  --transition-default: 0.2s ease;
}

/* --------------------------------------------------------
   TYPOGRAPHY — Line heights dos títulos em mobile (≤767px)
   Mesmos valores que theme/assets/css/tokens.css; corpo/caption
   mantêm os tokens definidos em :root acima.
   -------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --line-height-display: 50px;
    --line-height-h2: 36px;
    --line-height-h5: 24px;
    --line-height-h6: 21px;
    --line-height-h3: 20px;
  }
}

/* ============================================================
   DARK MODE — Override de tokens semânticos
   Ativado via data-theme="dark" no <html>

   Os mesmos nomes de variável recebem valores dark.
   Componentes que usam tokens semânticos adaptam automaticamente.
   ============================================================ */

[data-theme="dark"] {

  /* --------------------------------------------------------
     PRIMARY — tom mais claro para melhor contraste em fundo escuro
     -------------------------------------------------------- */
  --color-primary: #4DB8D0;
  --color-primary-variant: #0891A8;
  --color-primary-8: rgba(77, 184, 208, 0.08);
  --color-primary-0: rgba(77, 184, 208, 0);
  --color-primary-15: rgba(77, 184, 208, 0.15);

  /* --------------------------------------------------------
     SURFACES — inversão light/dark
     -------------------------------------------------------- */
  --color-bg-surface: #0D1112;
  --color-bg-card: var(--color-white-5);

  /* --------------------------------------------------------
     TEXT — texto claro sobre fundo escuro
     -------------------------------------------------------- */
  --color-text-primary: #FCFDFE;
  --color-text-secondary: #919A9E;
  --color-text-auxiliary: #919A9E;

  /* --------------------------------------------------------
     BORDERS — bordas sutis em white com opacidade
     -------------------------------------------------------- */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-hover: var(--color-white-13);
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-input: var(--color-white-13);
  --color-border-input-strong: rgba(255, 255, 255, 0.25);
  --color-border-aux: var(--color-white-10);

  /* --------------------------------------------------------
     SHADOW — versão para fundo escuro (preto com mais opacidade)
     -------------------------------------------------------- */
  --shadow-card:
    0px 2px 6px -4px rgba(0, 0, 0, 0.4),
    0px 4px 2px -0.6px rgba(0, 0, 0, 0.08),
    0px 10px 5px -1.25px rgba(0, 0, 0, 0.06),
    0px 18px 9px -1.9px rgba(0, 0, 0, 0.05),
    0px 30px 15px -2.5px rgba(0, 0, 0, 0.04),
    0px 49px 24px -3.1px rgba(0, 0, 0, 0.03),
    0px 80px 40px -3.75px rgba(0, 0, 0, 0.02);

  /* --------------------------------------------------------
     GRADIENTS — apenas os que precisam de override explícito
     (gradientes que usam var() de tokens semânticos auto-adaptam)
     -------------------------------------------------------- */
  --gradient-surface-glow: linear-gradient(180deg, var(--color-bg-card) 0%, var(--color-bg-surface) 50%, var(--color-bg-card) 100%);
}