/* =========================================================================
   Compensa.lá — Design tokens
   Source: brandbook_compensa-la.md (Capítulos 4, 5, 6, 8)
   ========================================================================= */

/* Inter 18pt — official institutional typeface (Cap 6.1).
   Bundled .ttf files served from /fonts/. The 18pt cut is the brand's
   chosen optical-size variant. All 9 weights + italics are registered. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Inter_18pt-Thin.ttf")        format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Inter_18pt-ThinItalic.ttf")  format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Inter_18pt-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Inter_18pt-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Inter_18pt-Light.ttf")       format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Inter_18pt-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter_18pt-Regular.ttf")     format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter_18pt-Italic.ttf")      format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter_18pt-Medium.ttf")      format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Inter_18pt-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter_18pt-SemiBold.ttf")    format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter_18pt-Bold.ttf")        format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Inter_18pt-BoldItalic.ttf")  format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Inter_18pt-ExtraBold.ttf")   format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Inter_18pt-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Inter_18pt-Black.ttf")       format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Inter_18pt-BlackItalic.ttf") format("truetype"); }

:root {
  /* ------------------------------------------------------------ */
  /* PALETTE — raw brand colors (Cap 4)                            */
  /* ------------------------------------------------------------ */

  /* Principal */
  --c-verde-compensa: #05302C; /* primary brand color, dark text on light */
  --c-branco:         #FFFFFF; /* primary surface, text on dark            */

  /* Destaque (accent) */
  --c-verde-vivo:     #41B38F; /* accent ONLY on light surfaces            */
  --c-verde-bruma:    #A7D5C2; /* accent ONLY on dark surfaces             */

  /* Gradient-only colors — NEVER use as solid fill (Cap 4.4)      */
  --c-mata-profunda:   #051A1B;
  --c-floresta-escura: #052323;
  --c-verde-mata:      #01644E;

  /* ------------------------------------------------------------ */
  /* SEMANTIC SURFACES                                              */
  /* The brand allows ONLY four background types (Cap 4.5):         */
  /*   1. Branco   2. Verde Compensa   3. Gradient   4. Photography */
  /* ------------------------------------------------------------ */
  --bg-light:        var(--c-branco);
  --bg-dark:         var(--c-verde-compensa);

  /* Canonical organic gradient (deep mata → mata profunda) used as
     a CSS-only stand-in for the official PNG gradients. For real
     peças prefer the raster gradients in /assets/gradients/.       */
  --bg-gradient-organic:
    radial-gradient(ellipse 70% 80% at 12% 18%, #2A9272 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 88% 88%, #0A4A3E 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 50% 50%, #05302C 0%, #051A1B 100%);

  --bg-gradient-linear:
    linear-gradient(110deg, #41B38F 0%, #01644E 35%, #05302C 70%, #051A1B 100%);

  --bg-gradient-predominant-dark:
    radial-gradient(ellipse 60% 75% at 6% 50%, #2A9272 0%, transparent 45%),
    linear-gradient(90deg, #05302C 0%, #051A1B 100%);

  /* ------------------------------------------------------------ */
  /* SEMANTIC INK                                                   */
  /* Cap 6.5 — text colors derive STRICTLY from contrast matrix     */
  /* ------------------------------------------------------------ */
  --ink-on-light:           var(--c-verde-compensa);
  --ink-on-light-muted:     color-mix(in srgb, var(--c-verde-compensa) 70%, transparent);
  --ink-on-light-footer:    color-mix(in srgb, var(--c-verde-compensa) 55%, transparent);
  --ink-on-light-accent:    var(--c-verde-vivo);

  --ink-on-dark:            var(--c-branco);
  --ink-on-dark-muted:      color-mix(in srgb, var(--c-branco) 78%, transparent);
  --ink-on-dark-footer:     color-mix(in srgb, var(--c-verde-bruma) 65%, transparent);
  --ink-on-dark-accent:     var(--c-verde-bruma);

  /* ------------------------------------------------------------ */
  /* CARDS & TRANSLUCENT SURFACES (Cap 8.2)                         */
  /* Card translúcido is the brand's structural device.             */
  /* ------------------------------------------------------------ */
  --card-on-dark:           color-mix(in srgb, var(--c-verde-bruma) 20%, transparent);
  --card-on-light:          color-mix(in srgb, var(--c-verde-bruma) 20%, transparent);
  --card-on-photo:          color-mix(in srgb, var(--c-branco)      70%, transparent);
  --card-solid-dark:        var(--c-verde-compensa);
  --card-solid-light:       var(--c-branco);

  /* ------------------------------------------------------------ */
  /* DIVIDERS / LINES (Cap 8.5)                                     */
  /* ------------------------------------------------------------ */
  --line-content-light:     color-mix(in srgb, var(--c-verde-vivo)  42%, transparent);
  --line-content-dark:      color-mix(in srgb, var(--c-verde-bruma) 42%, transparent);
  --line-list-light:        color-mix(in srgb, var(--c-verde-compensa) 10%, transparent);
  --line-grid-light:        color-mix(in srgb, var(--c-verde-compensa) 10%, transparent);

  /* ------------------------------------------------------------ */
  /* RADIUS                                                         */
  /* The square symbol corner curvature drives all card/badge       */
  /* rounding for visual coherence with the logo.                   */
  /* ------------------------------------------------------------ */
  --r-xs:  6px;   /* badges */
  --r-sm:  8px;   /* form inputs, small chips */
  --r-md:  12px;  /* cards translúcidos (Cap 8.2) */
  --r-lg:  16px;  /* large content cards */
  --r-xl:  24px;  /* hero blocks, big content containers */

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

  /* ------------------------------------------------------------ */
  /* TYPOGRAPHY (Cap 6)                                             */
  /* ------------------------------------------------------------ */
  --font-sans:
    "Inter", "Inter 18pt", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Display / hero — Cap 6.3 */
  --t-display-size:    96px;
  --t-display-weight:  700;
  --t-display-tracking: -0.02em;
  --t-display-leading: 1.05;

  /* H1 — page / slide title */
  --t-h1-size:    56px;
  --t-h1-weight:  700;
  --t-h1-tracking: -0.01em;
  --t-h1-leading: 1.15;

  /* H2 — section / block */
  --t-h2-size:    32px;
  --t-h2-weight:  600;
  --t-h2-tracking: 0;
  --t-h2-leading: 1.25;

  /* H3 — card header */
  --t-h3-size:    22px;
  --t-h3-weight:  500;
  --t-h3-tracking: 0;
  --t-h3-leading: 1.35;

  /* Body */
  --t-body-size:    17px;
  --t-body-weight:  400;
  --t-body-leading: 1.55;

  /* Body small / lead */
  --t-body-lg-size: 19px;
  --t-body-lg-leading: 1.55;

  /* Caption / legal */
  --t-caption-size:    13px;
  --t-caption-weight:  400;
  --t-caption-leading: 1.4;

  /* Eyebrow / overline label */
  --t-eyebrow-size:    12px;
  --t-eyebrow-weight:  600;
  --t-eyebrow-tracking: 0.16em;

  /* Badge (Cap 8.14) */
  --t-badge-size:    12px;
  --t-badge-weight:  600;
  --t-badge-tracking: 0.16em;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes on plain HTML to inherit canonical brand styling.
   ========================================================================= */

.cl-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-leading);
  color: var(--ink-on-light);
  text-wrap: pretty;
}

.cl-display {
  font-family: var(--font-sans);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-leading);
  letter-spacing: var(--t-display-tracking);
  text-wrap: balance;
}

.cl-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1-size);
  font-weight: var(--t-h1-weight);
  line-height: var(--t-h1-leading);
  letter-spacing: var(--t-h1-tracking);
  text-wrap: balance;
}

.cl-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-leading);
  text-wrap: balance;
}

.cl-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-leading);
}

.cl-lead {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-leading);
  font-weight: 400;
}

.cl-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-leading);
}

.cl-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--t-eyebrow-weight);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
}

/* Numbers in destaque — Cap 6.9 */
.cl-numeric {
  font-family: var(--font-sans);
  font-weight: 800;
  font-feature-settings: "tnum" on, "lnum" on;
  letter-spacing: -0.02em;
}

/* Eyebrow divider — Cap 8.5 (T1) */
.cl-eyebrow-divider {
  width: 100px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-verde-vivo);
  border: 0;
  margin: 0 0 var(--s-5);
}
.cl-on-dark .cl-eyebrow-divider { background: var(--c-verde-bruma); }

/* Badge — Cap 8.14 */
.cl-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-xs);
  font-family: var(--font-sans);
  font-size: var(--t-badge-size);
  font-weight: var(--t-badge-weight);
  letter-spacing: var(--t-badge-tracking);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c-verde-vivo) 15%, transparent);
  color: var(--c-verde-vivo);
  white-space: nowrap;
}
.cl-on-dark .cl-badge {
  background: color-mix(in srgb, var(--c-verde-bruma) 25%, transparent);
  color: var(--c-verde-bruma);
}

/* Translucent card surface (Cap 8.2) */
.cl-card-translucent {
  background: var(--card-on-dark);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.cl-on-light .cl-card-translucent { background: var(--card-on-light); }
.cl-on-photo  .cl-card-translucent { background: var(--card-on-photo); }

/* Solid card */
.cl-card-solid {
  background: var(--c-branco);
  color: var(--ink-on-light);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.cl-on-light .cl-card-solid {
  background: var(--c-verde-compensa);
  color: var(--ink-on-dark);
}

/* =========================================================================
   ROOT-LEVEL PAGE DEFAULTS
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  color: var(--ink-on-light);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-verde-vivo);
  color: var(--c-branco);
}