/* ============================================================
   mentorBI finanzas — Colors & Type
   Source: PPT-plantilla-paleta-Hor.pptx (theme + slide 3 palette)
   ============================================================ */

/* ---------- Webfont (Montserrat) ----------
   Brand fonts served from /fonts/ (TTF, full Montserrat family with italics).
   Five canonical weights are used in the system: 300, 500, 700, 800, 900.
*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Montserrat-Black.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); }

:root {
  /* ============ BRAND COLORS ============
     Hex codes copied verbatim from the palette slide (slide 3) and the theme XML.
  */
  --mbi-verde:        #AEC000; /* "Verde mBI" — primary brand color (logo "BI", CTAs)        */
  --mbi-lima:         #DBF900; /* "Verde Lima" — high-energy accent / data highlight         */
  --mbi-amarillo:     #F6FC88; /* "Amarillo" — soft fill, highlight blocks                   */
  --mbi-turquesa:     #2BCBC7; /* "Turquesa" — secondary accent, info chips                  */
  --mbi-naranja:      #EF8600; /* "Naranja" — warm accent, callouts, "live"/REC pairing       */
  --mbi-negro:        #000000; /* "Negro" — deep background, headlines on light              */
  --mbi-gris-oscuro:  #595959; /* "Gris oscuro" — wordmark grey, body text on light          */
  --mbi-gris-claro:   #D9D9D9; /* "Gris claro" — dividers, surfaces on dark, muted text      */
  --mbi-blanco:       #FFFFFF; /* "Blanco" */

  /* Tints/alphas derived from the brand palette (no new hues introduced) */
  --mbi-verde-50:     color-mix(in oklab, var(--mbi-verde) 50%, white);
  --mbi-verde-10:     color-mix(in oklab, var(--mbi-verde) 12%, white);
  --mbi-amarillo-30:  color-mix(in oklab, var(--mbi-amarillo) 60%, white);

  /* ============ SEMANTIC TOKENS — LIGHT (default) ============ */
  --bg:             var(--mbi-blanco);
  --bg-alt:         #F4F4F4;          /* very-light grey surface (between blanco & D9D9D9) */
  --surface:        var(--mbi-blanco);
  --surface-dark:   var(--mbi-negro);
  --border:         var(--mbi-gris-claro);
  --border-strong:  #BFBFBF;

  --fg:             var(--mbi-negro);
  --fg-1:           var(--mbi-negro);          /* headlines */
  --fg-2:           var(--mbi-gris-oscuro);    /* body */
  --fg-3:           #8A8A8A;                   /* tertiary / captions */
  --fg-on-dark:     var(--mbi-blanco);
  --fg-on-brand:    var(--mbi-negro);          /* mBI green is bright — black sits on it */

  --brand:          var(--mbi-verde);
  --brand-hover:    color-mix(in oklab, var(--mbi-verde) 88%, black);
  --brand-active:   color-mix(in oklab, var(--mbi-verde) 78%, black);
  --brand-soft:     var(--mbi-verde-10);

  --accent:         var(--mbi-lima);
  --accent-warm:    var(--mbi-naranja);
  --accent-cool:    var(--mbi-turquesa);
  --accent-soft:    var(--mbi-amarillo);

  --rec-red:        #E33E3E; /* used for the "REC" live-class dot — not in the brand palette,
                                 but appears in the deck as a live/recording indicator */

  /* Status (mapped onto brand hues) */
  --success:        var(--mbi-verde);
  --warning:        var(--mbi-naranja);
  --info:           var(--mbi-turquesa);
  --danger:         var(--rec-red);

  /* ============ TYPE ============ */
  --font-display:   'Montserrat', system-ui, sans-serif; /* used at 800/900 for display */
  --font-body:      'Montserrat', system-ui, sans-serif; /* used at 500 for body, 300 for light */

  --fw-light:       300;
  --fw-medium:      500;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Type scale — designed for 1920x1080 deck + web. */
  --fs-display-xl:  clamp(56px, 7vw, 120px); /* hero "1.500€" / massive numbers */
  --fs-display:     clamp(40px, 5vw,  88px); /* slide titles in ExtraBold */
  --fs-h1:          clamp(32px, 3.4vw, 56px);
  --fs-h2:          clamp(24px, 2.4vw, 40px);
  --fs-h3:          20px;
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-micro:       12px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-body:        1.55;

  --tracking-tight: -0.02em;     /* big black display */
  --tracking-normal: 0;
  --tracking-wide:  0.04em;      /* small caps eyebrow labels */

  /* ============ SPACING / RADIUS / SHADOW ============ */
  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;       /* default card */
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows — light, neutral. The deck barely uses shadows; we keep them subtle. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 6px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-3: 0 16px 40px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --ring-brand: 0 0 0 3px color-mix(in oklab, var(--mbi-verde) 35%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,.0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* Dark theme — used by hero slides, dark surfaces, the "fondo negro" logo */
[data-theme="dark"], .mbi-dark {
  --bg:             var(--mbi-negro);
  --bg-alt:         #111111;
  --surface:        #141414;
  --border:         #2A2A2A;
  --border-strong:  #3A3A3A;
  --fg:             var(--mbi-blanco);
  --fg-1:           var(--mbi-blanco);
  --fg-2:           var(--mbi-gris-claro);
  --fg-3:           #9A9A9A;
  --fg-on-brand:    var(--mbi-negro);
}

/* ============ ELEMENT-LEVEL STYLES ============ */

html, body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);      letter-spacing: 0; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold);      letter-spacing: 0; line-height: var(--lh-snug); }

.display-xl { font-family: var(--font-display); font-weight: var(--fw-black);     font-size: var(--fs-display-xl); line-height: .95; letter-spacing: -0.03em; color: var(--fg-1); }
.display    { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display);    line-height: 1.0;  letter-spacing: -0.02em; color: var(--fg-1); }

p { margin: 0 0 var(--space-4); }
.p-lead   { font-size: 18px; font-weight: var(--fw-medium); color: var(--fg-2); }
.p-body   { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--fg-2); }
.p-small  { font-size: var(--fs-small); color: var(--fg-3); }
.p-light  { font-weight: var(--fw-light); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mbi-gris-oscuro);
}

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
}

/* The signature "BI in green" inline mark (used inside running text/headlines) */
.mark-bi { color: var(--mbi-verde); font-weight: var(--fw-black); }

/* Text selection picks up brand */
::selection { background: var(--mbi-lima); color: var(--mbi-negro); }