/* ==========================================================================
   MÉTODO — Colors & Typography Foundations
   Brand: Método (agenciametodo.com) — Digital Commerce Consultancy
   Source: IDV 2025 Manual de Marca
   ========================================================================== */

/* ---------- Fonts ----------
   Primary display:  Neutral Sans — for headlines & logo-adjacent display
                     Licensed files at /fonts/NeutralSans-*.ttf
   Primary body:     Lota Grotesque (Los Andes) — for body copy
                     Full family now installed (Thin → Black, roman + italic)
-----------------------------------*/

/* Neutral Sans — display */
@font-face {
  font-family: "Neutral Sans";
  src: url("fonts/NeutralSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neutral Sans";
  src: url("fonts/NeutralSans-Meidum.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neutral Sans";
  src: url("fonts/NeutralSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neutral Sans";
  src: url("fonts/NeutralSans-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Lota Grotesque — body. Full roman + italic set. */
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Thin_Italic.otf") format("opentype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Extra_Light.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Exgtra_Light_Italic.otf") format("opentype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Light_Italic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Regular_Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_SemiBold_Italic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Bold_Italic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lota Grotesque";
  src: url("fonts/Lota_Grotesque_Black_Italic.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* =========================================================
     COLORS — Paleta oficial (Manual de Marca, p. 24)
     ========================================================= */

  /* Signature / Brand */
  --metodo-yellow:   #F6F490;   /* primary accent — "cambiante" */
  --metodo-gold:     #BDA377;   /* secondary accent — warm/sober */

  /* Core neutrals */
  --metodo-black:    #161616;   /* canonical black */
  --metodo-charcoal: #2D2C2C;   /* secondary dark */
  --metodo-light:    #E8E8E8;   /* neutral light */
  --metodo-offwhite: #F8F8F7;   /* paper / background */
  --metodo-white:    #FFFFFF;

  /* --- Foreground roles ---------------------------------- */
  --fg-1: var(--metodo-black);      /* primary text */
  --fg-2: var(--metodo-charcoal);   /* secondary text */
  --fg-3: #6A6A6A;                  /* tertiary / muted */
  --fg-4: #9A9A9A;                  /* disabled / caption */
  --fg-inverse: var(--metodo-offwhite);

  /* --- Background roles ---------------------------------- */
  --bg-1: var(--metodo-offwhite);   /* page bg */
  --bg-2: var(--metodo-white);      /* card / panel */
  --bg-3: var(--metodo-light);      /* subtle panel */
  --bg-inverse: var(--metodo-black);
  --bg-accent: var(--metodo-yellow);
  --bg-accent-warm: var(--metodo-gold);

  /* --- Borders / dividers -------------------------------- */
  --border-1: #E2E2E0;              /* hairline */
  --border-2: #CFCFCC;              /* solid divider */
  --border-strong: var(--metodo-black);

  /* --- Semantic (pragmatic extensions, not in manual) ---- */
  --semantic-success: #4B7A5A;
  --semantic-warning: #C89A3C;
  --semantic-danger:  #B4473B;
  --semantic-info:    var(--metodo-gold);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: "Neutral Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Lota Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Type scale (modular 1.25) */
  --fs-caption: 12px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      36px;
  --fs-h2:      48px;
  --fs-h1:      64px;
  --fs-display: 96px;

  /* Line heights */
  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-base:  1.45;
  --lh-loose: 1.65;

  /* Letter spacing — manual specifies tracking 0–20 for display, 0–50 for body */
  --ls-display: -0.01em;      /* tight but not crushed */
  --ls-tight:   -0.02em;
  --ls-body:    0;
  --ls-wide:    0.04em;       /* 40 tracking */
  --ls-caps:    0.08em;       /* uppercase eyebrows */

  /* =========================================================
     SPACING (8pt grid)
     ========================================================= */
  --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;

  /* =========================================================
     RADII — sober, minimal. Avoid heavy rounding.
     ========================================================= */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — restrained, editorial
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(22,22,22,0.04), 0 1px 1px rgba(22,22,22,0.03);
  --shadow-2: 0 4px 12px rgba(22,22,22,0.06), 0 2px 4px rgba(22,22,22,0.04);
  --shadow-3: 0 14px 40px rgba(22,22,22,0.08), 0 4px 10px rgba(22,22,22,0.04);
  --shadow-focus: 0 0 0 3px rgba(246,244,144,0.55);

  /* =========================================================
     MOTION — sober, confident, never bouncy
     ========================================================= */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — uppercase, geometric, used for big statements */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}

.eyebrow, .kicker {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-light {
  font-weight: var(--fw-light);
  color: var(--fg-2);
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}