/* =========================================================================
   WindMar Home · Design System · Colors & Type
   -------------------------------------------------------------------------
   Import into any HTML artifact to pick up the full brand foundation.
     <link rel="stylesheet" href="/colors_and_type.css">
   Fonts are loaded from /fonts/. Bebas Neue is pulled from Google Fonts as
   the approved secondary display face (flagged for review — see README).
   ========================================================================= */

/* ---------------- Fonts ---------------- */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Italic weights — used for taglines + italicized emphasis inside headlines */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bebas Neue — secondary display face, loaded locally from the licensed OTF */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------- Tokens ---------------- */

:root {
  /* --- Brand primaries (per brand doc) --- */
  --wm-blue:            #1D429B;  /* Pantone 286 · corporate blue */
  --wm-blue-deep:       #21274E;  /* Deep navy for gradients and depth */
  --wm-orange:          #F89B24;  /* Pantone 1375 · strategic accent */

  /* --- Extended blue scale (sampled from brand artwork) --- */
  --wm-blue-50:         #EEF3FD;
  --wm-blue-100:        #D8E3F7;
  --wm-blue-200:        #AFC3EE;
  --wm-blue-300:        #7F9CDF;
  --wm-blue-400:        #4A70C8;
  --wm-blue-500:        #1D429B;  /* = --wm-blue */
  --wm-blue-600:        #183785;
  --wm-blue-700:        #152D6B;
  --wm-blue-800:        #21274E;  /* = --wm-blue-deep */
  --wm-blue-900:        #0A0F1B;

  /* --- Vibrant blue (used in gradients / highlights) --- */
  --wm-blue-vibrant:    #0079C0;
  --wm-blue-mid:        #24378C;
  --wm-blue-dark:       #192059;

  /* --- Orange scale --- */
  --wm-orange-300:      #FBC074;
  --wm-orange-500:      #F89B24;  /* = --wm-orange */
  --wm-orange-600:      #E28312;

  /* --- Neutrals --- */
  --wm-black:           #231F20;  /* Body text */
  --wm-ink:             #16181C;
  --wm-gray-900:        #231F20;
  --wm-gray-700:        #4B4B4E;
  --wm-gray-500:        #8A8A8F;
  --wm-gray-300:        #C8C9CE;
  --wm-gray-200:        #E4E5E9;
  --wm-gray-100:        #F1F2F5;
  --wm-gray-50:         #F7F8FA;
  --wm-white:           #FFFFFF;

  /* --- Semantic surfaces --- */
  --wm-bg:              var(--wm-white);
  --wm-bg-muted:        var(--wm-gray-50);
  --wm-bg-pattern:      var(--wm-gray-100);     /* where dotted / diagonal patterns sit */
  --wm-surface:         var(--wm-white);
  --wm-surface-accent:  var(--wm-blue);          /* rounded blue info block */

  /* --- Semantic text --- */
  --wm-fg:              var(--wm-black);        /* body text default */
  --wm-fg-muted:        var(--wm-gray-700);
  --wm-fg-subtle:       var(--wm-gray-500);
  --wm-fg-on-blue:      var(--wm-white);
  --wm-fg-on-orange:    var(--wm-white);
  --wm-fg-brand:        var(--wm-blue);         /* titles, highlighted words */
  --wm-fg-accent:       var(--wm-orange);       /* key figures, underlines, CTAs */

  /* --- Gradients --- */
  --wm-gradient-dark:    linear-gradient(135deg, #0A0F1B 0%, #223264 100%);
  --wm-gradient-vibrant: linear-gradient(135deg, #0079C0 0%, #24378C 55%, #192059 100%);
  --wm-gradient-hero:    linear-gradient(180deg, #1D429B 0%, #21274E 100%);

  /* --- Shadows (soft, corporate) --- */
  --wm-shadow-sm:  0 1px 2px rgba(33, 39, 78, 0.08);
  --wm-shadow-md:  0 8px 24px rgba(33, 39, 78, 0.10);
  --wm-shadow-lg:  0 24px 60px rgba(10, 15, 27, 0.18);
  --wm-shadow-blue: 0 18px 40px rgba(29, 66, 155, 0.25);

  /* --- Radii --- */
  --wm-radius-sm:  6px;
  --wm-radius-md:  12px;
  --wm-radius-lg:  20px;
  --wm-radius-xl:  28px;   /* rounded blue info blocks */
  --wm-radius-pill: 999px;

  /* --- Spacing scale (4px base) --- */
  --wm-space-1:  4px;
  --wm-space-2:  8px;
  --wm-space-3:  12px;
  --wm-space-4:  16px;
  --wm-space-5:  24px;
  --wm-space-6:  32px;
  --wm-space-7:  48px;
  --wm-space-8:  64px;
  --wm-space-9:  96px;

  /* --- Type families --- */
  --wm-font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --wm-font-display: "Bebas Neue", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* --- Type scale (px, desktop baseline) --- */
  --wm-fs-display:  72px;   /* Bebas showroom-style headlines */
  --wm-fs-h1:       48px;
  --wm-fs-h2:       36px;
  --wm-fs-h3:       28px;
  --wm-fs-h4:       22px;
  --wm-fs-lead:     18px;
  --wm-fs-body:     14px;
  --wm-fs-small:    14px;
  --wm-fs-micro:    12px;

  /* --- Line heights --- */
  --wm-lh-tight:  1.05;
  --wm-lh-snug:   1.2;
  --wm-lh-normal: 1.45;
  --wm-lh-loose:  1.6;

  /* --- Letter spacing --- */
  --wm-tracking-tight:  -0.01em;
  --wm-tracking-normal: 0;
  --wm-tracking-wide:   0.04em;
  --wm-tracking-caps:   0.08em;  /* for ALL-CAPS eyebrows (matches brand art) */
}

/* ---------------- Base typography ---------------- */

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

/* Display — Bebas Neue, tall caps for showroom/impact headlines */
.wm-display,
h1.wm-display {
  font-family: var(--wm-font-display);
  font-size: var(--wm-fs-display);
  line-height: var(--wm-lh-tight);
  letter-spacing: var(--wm-tracking-normal);
  color: var(--wm-fg-brand);
  text-transform: uppercase;
  font-weight: 400; /* Bebas is a single-weight face */
  text-wrap: balance;
}

/* Headings — Montserrat Black/Bold, brand blue */
h1, .wm-h1 {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-h1);
  line-height: var(--wm-lh-tight);
  letter-spacing: var(--wm-tracking-tight);
  color: var(--wm-fg-brand);
  font-weight: 900;
  text-wrap: balance;
}
h2, .wm-h2 {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-h2);
  line-height: var(--wm-lh-snug);
  letter-spacing: var(--wm-tracking-tight);
  color: var(--wm-fg-brand);
  font-weight: 800;
  text-wrap: balance;
}
h3, .wm-h3 {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-h3);
  line-height: var(--wm-lh-snug);
  color: var(--wm-fg-brand);
  font-weight: 700;
}
h4, .wm-h4 {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-h4);
  line-height: var(--wm-lh-snug);
  color: var(--wm-fg-brand);
  font-weight: 600;
}

/* Eyebrow — uppercase tracked caps used in brand artwork
   ("LAS RESPUESTAS QUE BUSCAS…", "CON WINDMAR COMPRAS MÁS QUE EQUIPOS.") */
.wm-eyebrow {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-small);
  font-weight: 700;
  letter-spacing: var(--wm-tracking-caps);
  text-transform: uppercase;
  color: var(--wm-fg-brand);
}

/* Lead / body */
.wm-lead {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-lead);
  line-height: var(--wm-lh-normal);
  color: var(--wm-fg);
  font-weight: 400;
}
p, .wm-p {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-body);
  line-height: var(--wm-lh-normal);
  color: var(--wm-fg);
  font-weight: 400;
  text-wrap: pretty;
}
.wm-small { font-size: var(--wm-fs-small); color: var(--wm-fg-muted); }
.wm-micro { font-size: var(--wm-fs-micro); color: var(--wm-fg-subtle); letter-spacing: var(--wm-tracking-wide); }

/* Tagline / manifesto italic (matches "No es solo energía, es tranquilidad…") */
.wm-tagline {
  font-family: var(--wm-font-sans);
  font-style: italic;
  font-weight: 500;
  color: var(--wm-fg-brand);
}

/* Weight contrast within a single heading — the signature WindMar move:
   regular / bold mixed word-by-word (e.g., "Lo que **más valoran**…") */
.wm-weight-light  { font-weight: 400; }
.wm-weight-regular{ font-weight: 500; }
.wm-weight-bold   { font-weight: 700; }
.wm-weight-black  { font-weight: 900; }

/* Accent underline — short orange bar used as a manifesto separator */
.wm-accent-rule {
  display: inline-block;
  width: 72px;
  height: 3px;
  background: var(--wm-orange);
  border-radius: var(--wm-radius-pill);
}

/* Big statistic — huge blue figure with orange pulling the eye
   ("23 años", "+1,000,000", "24/7") */
.wm-stat {
  font-family: var(--wm-font-sans);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--wm-fg-brand);
  letter-spacing: -0.02em;
}
.wm-stat--accent { color: var(--wm-fg-accent); }

/* Links */
a, .wm-link {
  color: var(--wm-fg-brand);
  text-decoration: underline;
  text-decoration-color: var(--wm-orange);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--wm-blue-600); }

/* Selection */
::selection { background: var(--wm-orange); color: var(--wm-white); }