/* =====================================================================
   CampoClin · Colors & Type
   Single source of truth for visual foundations.
   Brand palette verified against official Branding document (Nov 2025).
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&display=swap");

:root {
  /* --------------------------- BRAND COLORS --------------------------- */
  /* From official brand guide. Two-tone blue palette + supporting medium. */
  --cc-campo:        #151E4A;   /* primary navy — "Campo" half of logo · Pantone 2766 C */
  --cc-campo-2:     #0F1638;    /* darker navy — hover / pressed                        */
  --cc-campo-soft:  #2A3766;    /* slightly lifted navy for surfaces                    */

  --cc-clin:         #4EB2DC;   /* accent light blue — "Clin" half of logo · Pantone 2190 C */
  --cc-clin-2:      #2E96C2;    /* darker accent — hover                                 */
  --cc-clin-soft:   #B5DCEE;    /* light tint surface                                    */
  --cc-clin-ghost:  #E8F3F9;    /* very pale wash                                        */

  --cc-azul:         #2969AC;   /* supporting medium blue · Pantone 2151 C               */
  --cc-azul-2:      #1F5288;    /* darker support                                        */

  /* --------------------------- NEUTRALS ------------------------------ */
  --cc-papel:        #FFFFFF;   /* page background — pure white per brand              */
  --cc-papel-2:      #F4F7FA;   /* card / inset surface                                 */
  --cc-areia:        #E8F3F9;   /* highlight band — alias of clin-ghost                  */
  --cc-areia-2:      #D6E8F1;   /* heavier wash                                          */
  --cc-linha:        #E2E8EF;   /* hairline border                                       */
  --cc-borda:        #C7D2DD;   /* stronger border / divider                             */

  --cc-tinta:        #151E4A;   /* primary text — brand navy doubles as text             */
  --cc-tinta-2:      #3F4868;   /* secondary text                                        */
  --cc-bruma:        #76819A;   /* tertiary / muted                                      */
  --cc-bruma-2:      #A1A9BE;   /* even more muted                                       */

  --cc-white:        #FFFFFF;

  /* --------------------------- SEMANTIC --------------------------- */
  --cc-fg-1:         var(--cc-tinta);
  --cc-fg-2:         var(--cc-tinta-2);
  --cc-fg-3:         var(--cc-bruma);
  --cc-fg-on-campo:  var(--cc-white);
  --cc-fg-on-clin:   var(--cc-campo);

  --cc-bg-1:         var(--cc-papel);
  --cc-bg-2:         var(--cc-papel-2);
  --cc-bg-3:         var(--cc-areia);
  --cc-bg-invert:    var(--cc-campo);
  --cc-bg-accent:    var(--cc-clin);

  --cc-border:       var(--cc-linha);
  --cc-border-strong:var(--cc-borda);

  --cc-success:      #2E9B6E;
  --cc-warning:      #E4A93D;
  --cc-error:        #C44545;
  --cc-info:         var(--cc-azul);

  /* --------------------------- TYPOGRAPHY ---------------------------- */
  /* Mukta — friendly humanist sans used across the brand identity.
     If different from the foundry's choice, swap here. */
  --cc-font-display: "Mukta", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cc-font-body:    "Mukta", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid where useful */
  --cc-display-xl:   clamp(48px, 7vw, 96px);     /* hero                              */
  --cc-display-lg:   clamp(40px, 5vw, 72px);     /* section title                     */
  --cc-display-md:   clamp(32px, 3.6vw, 52px);   /* sub-section                       */
  --cc-h1:           clamp(28px, 3vw, 42px);
  --cc-h2:           clamp(24px, 2.4vw, 32px);
  --cc-h3:           22px;
  --cc-h4:           18px;
  --cc-body-lg:      18px;
  --cc-body:         16px;
  --cc-body-sm:      14px;
  --cc-caption:      12px;
  --cc-eyebrow:      13px;                       /* uppercase tracked label           */

  /* Line-heights */
  --cc-lh-tight:     1.05;
  --cc-lh-display:   1.1;
  --cc-lh-heading:   1.22;
  --cc-lh-body:      1.6;
  --cc-lh-loose:     1.75;

  /* Tracking */
  --cc-track-tight:  -0.02em;
  --cc-track-normal: 0;
  --cc-track-eyebrow: 0.16em;

  /* Font weights — Mukta provides 300/400/500/600/700/800 */
  --cc-w-light:      300;
  --cc-w-regular:    400;
  --cc-w-medium:     500;
  --cc-w-semibold:   600;
  --cc-w-bold:       700;
  --cc-w-heavy:      800;

  /* --------------------------- SPACING / RADII ----------------------- */
  --cc-s-1:  4px;
  --cc-s-2:  8px;
  --cc-s-3:  12px;
  --cc-s-4:  16px;
  --cc-s-5:  24px;
  --cc-s-6:  32px;
  --cc-s-7:  48px;
  --cc-s-8:  64px;
  --cc-s-9:  96px;
  --cc-s-10: 128px;

  --cc-r-xs:  4px;
  --cc-r-sm:  8px;
  --cc-r-md:  14px;
  --cc-r-lg:  20px;
  --cc-r-xl:  28px;
  --cc-r-2xl: 40px;
  --cc-r-pill: 999px;

  /* --------------------------- SHADOWS ------------------------------- */
  /* Cool-tinted (rgba of navy, not pure black). */
  --cc-shadow-sm:  0 1px 2px rgba(21,30,74,0.06),  0 1px 1px rgba(21,30,74,0.04);
  --cc-shadow-md:  0 6px 16px rgba(21,30,74,0.08), 0 2px 4px rgba(21,30,74,0.05);
  --cc-shadow-lg:  0 18px 40px -12px rgba(21,30,74,0.18), 0 6px 12px rgba(21,30,74,0.06);
  --cc-shadow-xl:  0 30px 60px -20px rgba(21,30,74,0.24), 0 10px 20px rgba(21,30,74,0.08);
  --cc-ring:       0 0 0 3px rgba(78,178,220,0.35);

  /* --------------------------- MOTION ------------------------------- */
  --cc-ease:       cubic-bezier(.2,.7,.2,1);
  --cc-ease-out:   cubic-bezier(.16,.84,.3,1);
  --cc-dur-fast:   140ms;
  --cc-dur-base:   220ms;
  --cc-dur-slow:   420ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Apply on plain HTML or use the .cc-* class equivalents.
   ===================================================================== */

.cc-root, body.cc-body {
  font-family: var(--cc-font-body);
  color: var(--cc-fg-1);
  background: var(--cc-bg-1);
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings use a two-weight pattern (300 + 700) that mirrors the logo's
   "Campo" (light) + "Clin" (bold) two-tone treatment. */
.cc-display-xl, .cc-display-lg, .cc-display-md,
.cc-h1, .cc-h2 {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-w-light);
  letter-spacing: var(--cc-track-tight);
  color: var(--cc-fg-1);
  margin: 0;
}
.cc-display-xl { font-size: var(--cc-display-xl); line-height: var(--cc-lh-display); }
.cc-display-lg { font-size: var(--cc-display-lg); line-height: var(--cc-lh-display); }
.cc-display-md { font-size: var(--cc-display-md); line-height: var(--cc-lh-display); }
.cc-h1         { font-size: var(--cc-h1);         line-height: var(--cc-lh-heading); }
.cc-h2         { font-size: var(--cc-h2);         line-height: var(--cc-lh-heading); }

/* "accent" within a heading — use <strong> or .cc-accent. Renders 700 weight,
   mirroring the wordmark's "Clin" treatment. */
.cc-display-xl strong, .cc-display-lg strong, .cc-display-md strong,
.cc-h1 strong, .cc-h2 strong,
.cc-accent { font-weight: var(--cc-w-bold); color: var(--cc-campo); }

.cc-h3, .cc-h4 {
  font-family: var(--cc-font-body);
  font-weight: var(--cc-w-semibold);
  letter-spacing: -0.005em;
  color: var(--cc-fg-1);
  margin: 0;
}
.cc-h3 { font-size: var(--cc-h3); line-height: 1.3; }
.cc-h4 { font-size: var(--cc-h4); line-height: 1.35; }

.cc-eyebrow {
  font-family: var(--cc-font-body);
  font-size: var(--cc-eyebrow);
  font-weight: var(--cc-w-semibold);
  letter-spacing: var(--cc-track-eyebrow);
  text-transform: uppercase;
  color: var(--cc-clin);
}

.cc-body-lg { font-size: var(--cc-body-lg); line-height: var(--cc-lh-loose); color: var(--cc-fg-2); }
.cc-body    { font-size: var(--cc-body);    line-height: var(--cc-lh-body);  color: var(--cc-fg-2); }
.cc-body-sm { font-size: var(--cc-body-sm); line-height: 1.5;                color: var(--cc-fg-3); }
.cc-caption { font-size: var(--cc-caption); line-height: 1.4;                color: var(--cc-fg-3); }

/* --- ELEMENT-LEVEL DEFAULTS (when wrapped in .cc-prose) -------------- */
.cc-prose h1 { font: 300 var(--cc-display-md)/var(--cc-lh-display) var(--cc-font-display); letter-spacing: var(--cc-track-tight); color: var(--cc-fg-1); margin: 0 0 var(--cc-s-5); }
.cc-prose h2 { font: 300 var(--cc-h1)/var(--cc-lh-heading)         var(--cc-font-display); letter-spacing: var(--cc-track-tight); color: var(--cc-fg-1); margin: var(--cc-s-7) 0 var(--cc-s-4); }
.cc-prose h3 { font: 600 var(--cc-h3)/1.3                          var(--cc-font-body);    color: var(--cc-fg-1); margin: var(--cc-s-6) 0 var(--cc-s-3); }
.cc-prose p  { color: var(--cc-fg-2); margin: 0 0 var(--cc-s-4); }
.cc-prose a  { color: var(--cc-azul); text-decoration: underline; text-underline-offset: 3px; }
.cc-prose a:hover { color: var(--cc-campo); }
.cc-prose strong { color: var(--cc-fg-1); font-weight: 700; }

/* --- LINKS ---------------------------------------------------------- */
.cc-link {
  color: var(--cc-azul);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--cc-dur-fast) var(--cc-ease);
}
.cc-link:hover { color: var(--cc-clin); }

/* --- SELECTION ----------------------------------------------------- */
::selection { background: var(--cc-clin-soft); color: var(--cc-campo); }