/* ============================================================
   Campos Salles Design System — bundle autossuficiente
   GERADO AUTOMATICAMENTE por tools/build-site-css.mjs.
   NÃO EDITE À MÃO: altere tokens/*.css na raiz e rode novamente.
   Concatena, nesta ordem: fonts + colors + typography + spacing + elevation + base.
   A importacao de fontes (tokens/fonts.css) fica como 1a regra do arquivo.
   ============================================================ */

/* Campos Salles — Webfonts
   Loaded from Google Fonts CDN. See readme.md "VISUAL FOUNDATIONS → Type"
   for the substitution note (originals not provided as binaries).
   - Montserrat  → display / wordmark / headings (geometric grotesk)
   - Open Sans   → body / UI text (humanist sans)
   - Caveat Brush→ brush-script accent words ("maior", "América Latina") */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Caveat+Brush&display=swap');

/* ============================================================
   Campos Salles — Color tokens
   Navy + gold institutional palette sampled from the brand site.
   BASE values first, then SEMANTIC aliases.
   ============================================================ */
:root {
  /* ---- Brand navy (primary) ---- */
  --navy-950: #08172b;  /* hero deepest */
  --navy-900: #0d2540;  /* hero gradient base */
  --navy-800: #14365a;  /* deep surfaces */
  --navy-700: #1b3a5c;  /* PRIMARY brand navy */
  --navy-600: #234463;  /* heading / hover */
  --navy-500: #2f5278;  /* muted navy */

  /* ---- Brand blue (interactive / glow) ---- */
  --blue-700: #14538f;
  --blue-600: #1c6fb5;  /* links, focus, primary-blue actions */
  --blue-500: #2b86d9;  /* radiating-ring glow, highlights */
  --blue-300: #7db8e8;
  --blue-100: #d7e8f7;  /* tint fills */
  --blue-50:  #eef5fc;

  /* ---- Brand gold (accent) ---- */
  --gold-600: #e0a800;  /* accent on light, hover */
  --gold-500: #f5b400;  /* PRIMARY accent gold */
  --gold-400: #ffc400;  /* bright headline gold */
  --gold-100: #fff1cc;  /* tint */

  /* ---- Neutrals ---- */
  --white:    #ffffff;
  --gray-50:  #f6f8fb;  /* page tint */
  --gray-100: #eef1f6;
  --gray-200: #e1e6ee;  /* borders */
  --gray-300: #cbd2dd;
  --gray-400: #9aa3b2;  /* muted icons */
  --gray-500: #6b7480;  /* body text */
  --gray-600: #525a66;
  --gray-700: #3a414b;
  --black:    #0b1118;

  /* ---- Semantic: status ---- */
  --success: #1f9d57;
  --success-bg: #e6f6ed;
  --warning: #f5b400;
  --warning-bg: #fff4d6;
  --danger:  #d8453b;
  --danger-bg: #fdeceb;
  --info:    #1c6fb5;
  --info-bg: #eef5fc;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --color-primary:        var(--navy-700);
  --color-primary-hover:   var(--navy-800);
  --color-primary-active:  var(--navy-900);
  --color-accent:          var(--gold-500);
  --color-accent-hover:    var(--gold-600);
  --color-link:            var(--blue-600);
  --color-link-hover:      var(--blue-700);

  --text-heading:   var(--navy-600);
  --text-body:      var(--gray-500);
  --text-strong:    var(--navy-700);
  --text-muted:     var(--gray-400);
  --text-on-dark:   var(--white);
  --text-on-accent: var(--navy-900);
  --text-link:      var(--blue-600);

  --surface-page:    var(--white);
  --surface-tint:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-deep:    var(--navy-900);
  --surface-blue:    var(--blue-50);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--blue-500);

  /* Hero overlay gradient (navy photo wash) */
  --gradient-hero: linear-gradient(115deg, rgba(8,23,43,0.94) 0%, rgba(20,54,90,0.80) 45%, rgba(28,111,181,0.40) 100%); /* @kind color */
  /* Gold underline / brush accent fill */
  --gradient-gold: linear-gradient(90deg, var(--gold-500), var(--gold-400)); /* @kind color */
}

/* ============================================================
   Campos Salles — Typography tokens
   Montserrat (display) · Open Sans (body) · Caveat Brush (accent)
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', system-ui, sans-serif;   /* headings, wordmark, hero */
  --font-body:    'Open Sans', system-ui, sans-serif;    /* paragraphs, UI */
  --font-brush:   'Caveat Brush', 'Comic Sans MS', cursive; /* highlighted accent words */

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Type scale (fluid-ready px) ---- */
  --fs-display:  clamp(2.75rem, 5vw, 4.25rem); /* @kind font */
  --fs-h1:       2.5rem;   /* 40 */
  --fs-h2:       2rem;     /* 32 — section titles "QUEM SOMOS" */
  --fs-h3:       1.5rem;   /* 24 */
  --fs-h4:       1.25rem;  /* 20 — card titles */
  --fs-lead:     1.125rem; /* 18 — intro paragraph */
  --fs-body:     1rem;     /* 16 */
  --fs-sm:       0.875rem; /* 14 */
  --fs-xs:       0.75rem;  /* 12 — labels, eyebrows */

  /* ---- Line heights ---- */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-eyebrow: 0.14em;  /* @kind font */

  /* ---- Semantic roles ---- */
  --heading-family: var(--font-display);
  --heading-weight: var(--fw-extra);
  --heading-spacing: var(--ls-tight); /* @kind font */
  --body-family: var(--font-body);
  --body-weight: var(--fw-regular);
  --body-leading: var(--lh-relaxed); /* @kind font */
}

/* ============================================================
   Campos Salles — Spacing & layout tokens
   8px base rhythm.
   ============================================================ */
:root {
  --space-0:  0;
  --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;

  /* Section rhythm (vertical) */
  --section-y: clamp(48px, 8vw, 96px); /* @kind spacing */

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);
  --gutter: 24px;
}

/* ============================================================
   Campos Salles — Elevation, radius & border tokens
   Soft, diffuse shadows on white cards; the active card carries
   a faint blue outer glow (sampled from the brand site).
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;   /* default card radius */
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--gray-200);
  --border-width: 1px;

  /* ---- Shadows (soft, low-contrast) ---- */
  --shadow-xs: 0 1px 2px rgba(13,37,64,0.06);
  --shadow-sm: 0 2px 8px rgba(13,37,64,0.07);
  --shadow-md: 0 10px 28px rgba(13,37,64,0.10);    /* default card */
  --shadow-lg: 0 22px 50px rgba(13,37,64,0.14);    /* hover lift */
  --shadow-glow: 0 12px 36px rgba(43,134,217,0.28); /* active blue glow */
  --shadow-gold: 0 10px 26px rgba(245,180,0,0.30);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgba(43,134,217,0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   Campos Salles — base resets & helpers
   Light, opt-in. Sets sensible document defaults using tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-family);
  color: var(--text-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-spacing);
  line-height: var(--lh-snug);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }

/* ---- Reusable brand utilities ---- */

/* Brush-script accent word, as seen in hero headlines */
.cs-brush {
  font-family: var(--font-brush);
  color: var(--gold-400);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Uppercase eyebrow / kicker */
.cs-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-600);
}

/* Section title like "QUEM SOMOS" */
.cs-section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--navy-600);
}

/* Constrained content container */
.cs-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Radiating concentric rings motif (hero background) */
.cs-rings {
  background-image:
    repeating-radial-gradient(circle at center,
      rgba(125,184,232,0.0) 0px,
      rgba(125,184,232,0.0) 78px,
      rgba(125,184,232,0.16) 79px,
      rgba(125,184,232,0.16) 80px);
}