/* ============================================================
   Humboldt Design System — Colors & Type
   Instituto de Investigación de Recursos Biológicos Alexander von Humboldt
   ============================================================ */

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

@font-face {
  font-family: "Amstelvar";
  src: url("./fonts/Amstelvar-Roman.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amstelvar";
  src: url("./fonts/Amstelvar-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");

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

:root {
  /* Logo (color mark — heliconia) */
  --color-logo-green: #006040;      /* Heliconia leaf — primary brand green */
  --color-logo-red: #e04040;        /* Heliconia flower — primary brand red */
  --color-logo-orange: #e08030;     /* Flower accent */

  /* Primary */
  --color-primary: #113545;         /* Institutional deep navy */
  --color-ink: #161616;             /* Body text on light */
  --color-ink-light: #f7f7f7;       /* Text on dark */
  --color-black: #070707;           /* Deep night (menu) */

  /* Surfaces */
  --color-surface: #fef8ed;         /* Floral white — global bg */
  --color-surface-alt: #f2f3ec;     /* Pearl — content sections */
  --color-surface-green: #dce0cd;   /* Soft olive green surface */

  /* Accents (ecosystemic) */
  --color-teal-deep: #004d67;       /* Deep water */
  --color-teal-bright: #3babcf;     /* Sky blue */
  --color-teal-light: #e2f2f8;      /* Light sky */
  --color-green-lime: #cdef84;      /* Bright vegetation */
  --color-green-dark: #384e00;      /* Dark foliage */
  --color-olive: #697b41;           /* Vegetal earth */
  --color-purple: #7d0168;          /* Floral accent */
  --color-sienna: #b25424;          /* Earth / wood */
  --color-orange-light: #ffb595;    /* Warmth */
  --color-yellow: #ffcc00;          /* Alert / highlight */
  --color-pink-light: #ffdbcd;      /* Soft skin tone */
  --color-grey: #636262;            /* Secondary text */

  /* Semantic aliases */
  --fg1: var(--color-ink);
  --fg2: var(--color-grey);
  --fg-inverse: var(--color-ink-light);
  --bg: var(--color-surface);
  --bg-alt: var(--color-surface-alt);
  --bg-inverse: var(--color-primary);
  --link: var(--color-teal-deep);
  --link-hover: var(--color-primary);
  --accent: var(--color-teal-bright);
  --highlight: var(--color-yellow);

  /* Type families */
  --font-serif: "Amstelvar", "Young Serif", "Source Serif Pro", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale — desktop */
  --fs-display: 110px;
  --fs-headers: 7.5vw;
  --fs-copy-text: 59px;
  --fs-title-display: 3vw;
  --fs-title-section: 32px;
  --fs-subtitle: 1.6vw;
  --fs-title-article: 17px;
  --fs-body: 14px;
  --fs-link: 12px;
  --fs-tag: 8px;
  --fs-cifras: 45px;
  --fs-destacado: 9px;

  /* Line heights */
  --lh-body: 20px;
  --lh-title-section: 36px;
  --lh-tight: 1.05;
  --lh-normal: 1.5;

  /* Letter spacing */
  --ls-body: 0.4px;
  --ls-link: 0.1px;
  --ls-tag: 1.1px;
  --ls-destacado: 2.5px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 100px;

  /* Borders + radii */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --border-hairline: 1px solid rgba(22, 22, 22, 0.12);
  --border-on-dark: 1px solid rgba(247, 247, 247, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
}

/* Mobile scale overrides */
@media (max-width: 767px) {
  :root {
    --fs-display: 60px;
    --fs-headers: 35px;
    --fs-copy-text: 40px;
    --fs-title-display: 29px;
    --fs-title-section: 25px;
    --fs-body: 12px;
    --fs-cifras: 35px;
  }
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg1);
  background: var(--bg);
}

/* ---------- Semantic type styles ---------- */

.display,
h1.display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.headers,
h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-headers);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}

.copy-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-copy-text);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.title-display,
h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-title-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.title-section,
h3 {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 420, "wdth" 100, "opsz" 40;
  font-size: var(--fs-title-section);
  line-height: var(--lh-title-section);
  letter-spacing: 0;
  margin: 0;
}

.subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 1.3;
}

.title-article,
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-title-article);
  line-height: 1.35;
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

a, .link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-link);
  letter-spacing: var(--ls-link);
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--link-hover); opacity: 0.85; }

.tag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
}

.cifras {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-cifras);
  line-height: 1;
  letter-spacing: -0.02em;
}

.destacado {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-destacado);
  letter-spacing: var(--ls-destacado);
  text-transform: uppercase;
}

/* Serif editorial variant for Amstelvar moments */
.serif-display {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 380, "wdth" 95, "opsz" 144;
  font-style: italic;
}

code, .mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}