/* ==========================================================================
   tokens.css — Sistema de Design HIG Moderna (Liquid Glass claro)
   Landing BEP Auditável — Coordenar Consultoria BIM

   Sprint: S-VISUAL-01 do plano r02
   Data: 14/07/2026
   Fonte canônica: ~/dev/knowledge-base/hig/moderna/relatorio-deep-research.md
   ADR: docs/adrs/ADR-007-identidade-visual-apple-hig.md (Auditoria_IFC_Manzione)

   Regras duras:
   - Modo claro obrigatório (ADR-007, sessão 183). Dark BANIDO.
   - Literals inline em backdrop-filter (bug Safari macOS 14.x: #289800, #297620).
   - SF Pro só via stack runtime -apple-system (licença Apple).
   - --accent-hover-decorative #6BA0BE nunca em texto sobre branco (WCAG 2.9:1 fail).
   ========================================================================== */

:root {

  /* ========================================================================
     1. Typography — family + escala iOS completa
     ======================================================================== */

  --font-family-system: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Large Title — 34px */
  --font-size-large-title: 34px;
  --font-weight-large-title: 700;
  --line-height-large-title: 41px;
  --letter-spacing-large-title: -0.5px;

  /* Title 1 — 28px */
  --font-size-title-1: 28px;
  --font-weight-title-1: 400;
  --line-height-title-1: 34px;
  --letter-spacing-title-1: 0.36px;

  /* Title 2 — 22px */
  --font-size-title-2: 22px;
  --font-weight-title-2: 400;
  --line-height-title-2: 28px;
  --letter-spacing-title-2: 0.35px;

  /* Title 3 — 20px */
  --font-size-title-3: 20px;
  --font-weight-title-3: 400;
  --line-height-title-3: 25px;
  --letter-spacing-title-3: 0.38px;

  /* Headline — 17px */
  --font-size-headline: 17px;
  --font-weight-headline: 600;
  --line-height-headline: 22px;
  --letter-spacing-headline: -0.43px;

  /* Body — 17px */
  --font-size-body: 17px;
  --font-weight-body: 400;
  --line-height-body: 22px;
  --letter-spacing-body: -0.43px;

  /* Callout — 16px */
  --font-size-callout: 16px;
  --font-weight-callout: 400;
  --line-height-callout: 21px;
  --letter-spacing-callout: -0.32px;

  /* Subhead — 15px */
  --font-size-subhead: 15px;
  --font-weight-subhead: 400;
  --line-height-subhead: 20px;
  --letter-spacing-subhead: -0.24px;

  /* Footnote — 13px */
  --font-size-footnote: 13px;
  --font-weight-footnote: 400;
  --line-height-footnote: 18px;
  --letter-spacing-footnote: -0.08px;

  /* Caption 1 — 12px */
  --font-size-caption-1: 12px;
  --font-weight-caption-1: 400;
  --line-height-caption-1: 16px;
  --letter-spacing-caption-1: 0;

  /* Caption 2 — 11px */
  --font-size-caption-2: 11px;
  --font-weight-caption-2: 400;
  --line-height-caption-2: 13px;
  --letter-spacing-caption-2: 0.07px;

  /* ========================================================================
     2. Color — text/label
     ======================================================================== */

  --text-label: #000000;
  --text-secondary: rgba(60, 60, 67, 0.60);
  --text-tertiary: rgba(60, 60, 67, 0.30);
  --text-quaternary: rgba(60, 60, 67, 0.18);

  /* ========================================================================
     3. Color — backgrounds
     ======================================================================== */

  --surface-base: #FFFFFF;
  --surface-recessed: #F2F2F7;
  --surface-elevated: #FFFFFF;

  /* ========================================================================
     4. Color — fills
     ======================================================================== */

  --fill-primary: rgba(120, 120, 128, 0.20);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);

  /* ========================================================================
     5. Color — accent + semantic
     ======================================================================== */

  --accent-primary: #245E88;
  --accent-hover-dark: #1E5077;
  --accent-pressed: #183E5C;
  --accent-hover-decorative: #6BA0BE;

  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-danger: #FF3B30;
  --color-info: #007AFF;

  /* ========================================================================
     6. Spacing (8pt primário + meio-passos 4pt)
     ======================================================================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ========================================================================
     7. Radius
     ======================================================================== */

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* ========================================================================
     8. Shadow
     ======================================================================== */

  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* ========================================================================
     9. Motion
     ======================================================================== */

  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --duration-micro: 150ms;
  --duration-standard: 300ms;
  --duration-large: 400ms;
}

/* ==========================================================================
   10. Classes de material — Liquid Glass (literals inline)
   ========================================================================== */

/* Liquid Glass Regular — adaptativa, uso em navigation layer */
.glass-regular {
  background: rgba(255, 255, 255, 0.72);
  /* var(--glass-blur-regular) = 24px — inline por bug WebKit #289800, #297620 */
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Liquid Glass Clear — permanentemente mais transparente, sem adaptação */
.glass-clear {
  background: rgba(255, 255, 255, 0.45);
  /* var(--glass-blur-clear) = 40px — inline por bug WebKit */
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* Fallback quando backdrop-filter não é suportado (5.37% dos browsers) */
@supports not (backdrop-filter: blur(1px)) {
  .glass-regular,
  .glass-clear {
    background: rgba(255, 255, 255, 0.94);
  }
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}