/* Armon — Design tokens (from armon-design-system) */

/* Typography.
   Brand face: Helvetica Neue LT Pro (45 Light / 65 Medium / 75 Bold).
   Web stack: Helvetica Neue where installed, with Inter as the webfont fallback. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* Base palette (from brand manual) */
  --armon-chumbo: #343434;        /* Fundamento — "quase preto, não preto" */
  --armon-blue-dark: #1071B9;     /* Sinal — cor de destaque, o ponto da verdade */
  --armon-blue-light: #55A4DB;    /* Elementos — cor secundária */
  --armon-gray: #B4B4B4;          /* Estrutura — neutro e imparcial */
  --armon-white: #FFFFFF;         /* Luz — vereditos, relatórios, transparência */

  /* Extended neutrals (derived, for UI surfaces) */
  --armon-ink: #1E1E1E;
  --armon-gray-700: #5A5A5A;
  --armon-gray-500: #8A8A8A;
  --armon-gray-300: #D6D6D6;
  --armon-gray-100: #F2F3F5;
  --armon-gray-50: #F8F9FA;

  /* Blue tints */
  --armon-blue-050: #EDF5FB;
  --armon-blue-700: #0C5C97;

  /* Brand gradient (controlled use: symbol, thin rules, small accents only) */
  --armon-gradient: linear-gradient(180deg, #55A4DB 0%, #1071B9 100%);
  --armon-gradient-h: linear-gradient(90deg, #1071B9 0%, #55A4DB 100%);

  /* Semantic aliases */
  --surface-page: var(--armon-white);
  --surface-subtle: var(--armon-gray-50);
  --surface-card: var(--armon-white);
  --surface-inverse: var(--armon-chumbo);
  --surface-inverse-raised: #3E3E3E;

  --text-heading: var(--armon-chumbo);
  --text-body: var(--armon-gray-700);
  --text-muted: var(--armon-gray-500);
  --text-on-inverse: var(--armon-white);
  --text-on-inverse-muted: var(--armon-gray);
  --text-link: var(--armon-blue-dark);
  --text-accent: var(--armon-blue-dark);

  --border-hairline: var(--armon-gray-300);
  --border-hairline-inverse: rgba(255, 255, 255, 0.16);
  --border-accent: var(--armon-blue-dark);

  --action-primary: var(--armon-blue-dark);
  --action-primary-hover: var(--armon-blue-700);
  --action-focus-ring: rgba(16, 113, 185, 0.35);

  /* Status (used sparingly — audit language, not alarm language) */
  --status-positive: #2E7D52;
  --status-attention: #B8860B;
  --status-critical: #B03A3A;

  /* Type */
  --font-sans: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-display: 64px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 26px;
  --text-h4: 20px;
  --text-lead: 20px;
  --text-body-size: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-figure: 56px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-wide: 0.12em;
  --tracking-tight: -0.02em;

  /* Spacing / layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container-max: 1200px;
  --container-pad: 32px;
  --section-pad-y: 96px;
  --grid-gap: 24px;

  /* Radii — architecture, not pills */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Borders & shadows */
  --border-w: 1px;
  --rule-accent: 2px solid var(--armon-blue-dark);
  --rule-hairline: 1px solid var(--armon-gray-300);

  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(30, 30, 30, 0.05);
  --shadow-raised: 0 4px 16px rgba(30, 30, 30, 0.08);
  --shadow-overlay: 0 12px 40px rgba(30, 30, 30, 0.18);

  /* Motion — discreet and elegant */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Focus */
  --focus-ring: 0 0 0 3px var(--action-focus-ring);
}

/* Base element defaults */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--action-primary-hover); }

::selection { background: var(--armon-blue-050); color: var(--armon-chumbo); }