/* ============================================================
   BROUO® — Colors & Type
   Source of truth: Brandbook 2025–2026 (Brouo Corp.)
   ============================================================ */

/* ---------- Fonts ----------
   Variable font ships the full 200–800 axis in a single file (preferred).
   Static woff2 files below remain as fallbacks for browsers without variable-font support. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------- Brand color tokens ---------------- */
  /* Brand-named (from brandbook) */
  --color-impulso:   #23CE6B; /* Verde Impulso — accent, CTAs, highlights */
  --color-absoluto:  #000000; /* Negro Absoluto — text, logo */
  --color-blanco:    #FFFFFF;
  --color-claro:     #F2F6F8; /* Neutro Claro — page bg */
  --color-estable:   #5D6C72; /* Neutro Estable — secondary text */
  --color-profundo:  #2D3538; /* Neutro Profundo — dark bg, deep contrast */

  /* Tints / shades of Impulso (used sparingly — wash, hover, focus) */
  --color-impulso-50:  #ECFBF2;
  --color-impulso-100: #C9F4DA;
  --color-impulso-200: #97E9B6;
  --color-impulso-400: #3AD679;
  --color-impulso-500: #23CE6B; /* canonical */
  --color-impulso-600: #1FB85F;
  --color-impulso-700: #198F4A;

  /* Neutral scale (derived from Estable / Profundo) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFB;
  --neutral-100: #F2F6F8; /* = Claro */
  --neutral-200: #E5EBEE;
  --neutral-300: #D2DADE;
  --neutral-400: #A6B1B6;
  --neutral-500: #5D6C72; /* = Estable */
  --neutral-700: #2D3538; /* = Profundo */
  --neutral-900: #000000; /* = Absoluto */

  /* ---------------- Semantic colors ---------------- */
  --bg-page:        var(--color-blanco);
  --bg-alt:         var(--color-claro);
  --bg-deep:        var(--color-profundo);
  --bg-inverse:     var(--color-absoluto);

  --fg-1:           var(--color-absoluto);  /* primary text */
  --fg-2:           var(--color-profundo);  /* heavy body */
  --fg-3:           var(--color-estable);   /* secondary / meta */
  --fg-on-dark:     var(--color-blanco);
  --fg-on-impulso:  var(--color-absoluto);  /* black sits on green */

  --accent:         var(--color-impulso);
  --accent-hover:   var(--color-impulso-600);
  --accent-soft:    var(--color-impulso-50);

  --border-1:       var(--neutral-200);
  --border-2:       var(--neutral-300);
  --border-strong:  var(--neutral-700);

  --focus-ring:     var(--color-impulso);

  /* Status (derived — not in brandbook, kept off-brand-minimal) */
  --status-success: var(--color-impulso-600);
  --status-warning: #E5A93C;
  --status-danger:  #D6453A;
  --status-info:    #3A82E5;

  /* ---------------- Type ---------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Weights — brandbook calls out ExtraBold (800) for display, Regular (400) for body */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Fluid type scale (modular ~1.25, tuned for Plus Jakarta Sans) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — Plus Jakarta Sans benefits from slight negative tracking at display sizes */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.08em;

  /* ---------------- Spacing (4px base) ---------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------------- Radii ---------------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-2xl:   40px;
  --radius-pill:  999px;

  /* ---------------- Shadows ---------------- */
  /* Soft, low-saturation. Brand prefers clean over heavy elevation. */
  --shadow-1: 0 1px 2px rgba(15, 23, 27, 0.04), 0 1px 1px rgba(15, 23, 27, 0.03);
  --shadow-2: 0 4px 12px rgba(15, 23, 27, 0.06), 0 1px 3px rgba(15, 23, 27, 0.04);
  --shadow-3: 0 12px 32px rgba(15, 23, 27, 0.08), 0 4px 12px rgba(15, 23, 27, 0.05);
  --shadow-4: 0 24px 60px rgba(15, 23, 27, 0.12), 0 8px 20px rgba(15, 23, 27, 0.06);
  --shadow-impulso: 0 8px 28px rgba(35, 206, 107, 0.28);

  /* ---------------- Motion ---------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphatic: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* ---------------- Layout ---------------- */
  --container-narrow: 880px;
  --container-base:   1120px;
  --container-wide:   1320px;
  --container-max:    1440px;
  --gutter:           clamp(20px, 4vw, 48px);
}

/* ============================================================
   Semantic typographic classes
   Use these directly OR mirror them with custom selectors.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display, h1.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-48), 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
/* Bare h1 — size + tracking only. Color INHERITS so dark sections work. */
h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-32), 3.6vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-32), 3.6vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-24), 2.2vw, var(--fs-32));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-24), 2.2vw, var(--fs-32));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
}

.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-18), 1.6vw, var(--fs-24));
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
/* Bare p — inherits color so it works on dark backgrounds. */
p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-3);
}
small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
}

/* Body default color is set on root so it cascades naturally to text elements,
   yet inverse-bg sections can override by just setting color: #fff on the section. */
body {
  color: var(--fg-2);
  background: var(--bg-page);
}

.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.t-cta {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-normal);
}

.t-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-medium);
}

/* Italic = always a deliberate emphasis (matches Plus Jakarta Sans Italic shapes). */
em, .t-italic { font-style: italic; }

/* The signature mark: the "o" replaced visually by the isotype is a common
   brand expression — apply via .brouo-mark on a single character/span. */
.brouo-mark {
  color: var(--color-impulso);
  font-weight: var(--fw-extrabold);
}