/* ==========================================================================
   ESLABÓN — Design tokens
   All the site's reusable values ​​reside here.
   To recolor the entire site, simply edit the "Brand Palette" block.
   ========================================================================== */

:root {
  /* Native controls (selects, scroll bars) follow the light theme. */
  color-scheme: light;

  /* ----------------------------------------------------------------------
     1. Brand Palette

   Each brand color has three variations:
   --brand-* exact institutional color (solid blocks, fills, large type)
   --brand-*-lit lightened version for text/icons on a dark background
   (guarantees AA contrast on --bark-800)
   --brand-*-deep deepened version for text/icons on the light paper
   (guarantees AA contrast on --sand-100)
     ---------------------------------------------------------------------- */
  --brand-purple: #8617a8;    /* Innovation, creativity, transformation, leadership */
  --brand-turquoise: #1891a8; /* Technology, trust, communication, modernity */
  --brand-green: #75a818;     /* Sustainability, growth, community */
  --brand-earth: #a85a18;     /* Development, proximity, culture, territory */
  --brand-graphite: #3f3a47;  /* Elegance, institutional identity, depth */

  --brand-purple-lit: #c25fe0;
  --brand-turquoise-lit: #35c6e0;
  --brand-green-lit: #a8dc3e;
  --brand-earth-lit: #e08b3e;

  /* Purple already clears AA on paper (7.0:1), so it is its own deep value. */
  --brand-purple-deep: #8617a8;
  --brand-turquoise-deep: #12707f;
  --brand-green-deep: #4f7310;
  --brand-earth-deep: #8f4a12;

  /* RGB components — to build rgba() with variable opacity */
  --brand-purple-rgb: 134 23 168;
  --brand-turquoise-rgb: 24 145 168;
  --brand-green-rgb: 117 168 24;
  --brand-earth-rgb: 168 90 24;

  /* ----------------------------------------------------------------------
     2. Neutral scale (warm clay — the paper the site is printed on)
     ---------------------------------------------------------------------- */
  --sand-50: #fdfbf7;  /* raised surfaces: cards, forms, tiles */
  --sand-100: #f8f3ea; /* page ground */
  --sand-200: #f1e9db; /* alternate band */
  --sand-300: #e5d9c6; /* borders */
  --sand-400: #c9baa3; /* soft strokes, decorative rules */
  --sand-500: #9a8a74; /* placeholders, disabled */
  --sand-600: #6e6153; /* soft text (5.4:1 on --sand-100) */
  --sand-700: #4a4038; /* muted body text (9.1:1) */
  --sand-800: #322a24; /* strong text */
  --sand-900: #241e19; /* headings (14.9:1) */

  /* Deep warm bark — the two inverted bands (metrics + footer) */
  --bark-900: #1e1814;
  --bark-800: #2a211b;
  --bark-700: #372c24;
  --bark-600: #4a3c31;

  /* ----------------------------------------------------------------------
     3.Semantic roles (what the components use)
     ---------------------------------------------------------------------- */
  --color-bg: var(--sand-100);
  --color-bg-deep: var(--sand-200);
  --color-surface: var(--sand-200);
  --color-surface-raised: var(--sand-50);
  --color-border: rgb(74 64 56 / 0.14);
  --color-border-strong: rgb(74 64 56 / 0.28);
  --color-text: var(--sand-900);
  --color-text-muted: var(--sand-700);
  --color-text-soft: var(--sand-600);
  --color-accent: var(--brand-earth-deep);
  --color-accent-solid: var(--brand-earth);
  --color-on-accent: #ffffff;
  --color-focus: var(--brand-earth-deep);

  /* Warm red for form errors — readable on paper */
  --color-danger: #b3261e;

  /*Default Hue: Components with data-hue overwrite it */
  --hue: var(--brand-earth-deep);
  --hue-solid: var(--brand-earth);
  --hue-rgb: var(--brand-earth-rgb);

  /* ----------------------------------------------------------------------
     4. Typography
     ---------------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Labels and data: Archivo condensed and tracked, so small caps read as
     printed captions rather than as terminal output. */
  --font-utility: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Optical display width (variable axis wdth of Archivo) */
  --display-width: 112;
  --utility-width: 92;

  --fs-eyebrow: 0.72rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9125rem;
  --fs-base: 1rem;
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-h1: clamp(2.2rem, 1.5rem + 2.9vw, 3.6rem);
  /* Numbers coexist with words ("Thousands", "National"): the limit is kept low so that no column overflows. */
  --fs-metric: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-relaxed: 1.68;

  --ls-display: -0.025em;
  --ls-eyebrow: 0.2em;

  /* ----------------------------------------------------------------------
     5. Spacing and measurements
     ---------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.75rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 780px;
  --measure: 62ch;

  /* ----------------------------------------------------------------------
     6.Shapes, shadows, and depth
     Shadows are warm and soft: ink settling into paper, not glow.
     ---------------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --hairline: 1px solid var(--color-border);

  --shadow-sm: 0 1px 2px rgb(74 64 56 / 0.06), 0 3px 10px -4px rgb(74 64 56 / 0.12);
  --shadow-md: 0 8px 24px -12px rgb(74 64 56 / 0.28);
  --shadow-lg: 0 28px 60px -28px rgb(74 64 56 / 0.36);
  /* Card lift on hover: a warm rim and a deeper settle, no bloom. */
  --shadow-lift: 0 0 0 1px rgb(var(--hue-rgb) / 0.28), 0 18px 38px -22px rgb(74 64 56 / 0.42);

  --blur-nav: saturate(140%) blur(18px);

  /* ----------------------------------------------------------------------
     7. Motion
     ---------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;

  /* ----------------------------------------------------------------------
     8. Layers
     ---------------------------------------------------------------------- */
  --z-base: 1;
  --z-spine: 40;
  --z-header: 60;
  --z-menu: 70;
  --z-skip: 90;

  /* Actual height of the top bar (adjusted by responsive.css) */
  --header-h: 68px;
}

/* Shade map — allows you to paint any component with data-hue="…"
   On paper the deepened variants are used: the exact institutional colors
   do not all reach AA at text sizes. */
[data-hue="purple"] {
  --hue: var(--brand-purple-deep);
  --hue-solid: var(--brand-purple);
  --hue-rgb: var(--brand-purple-rgb);
}

[data-hue="turquoise"] {
  --hue: var(--brand-turquoise-deep);
  --hue-solid: var(--brand-turquoise);
  --hue-rgb: var(--brand-turquoise-rgb);
}

[data-hue="green"] {
  --hue: var(--brand-green-deep);
  --hue-solid: var(--brand-green);
  --hue-rgb: var(--brand-green-rgb);
}

[data-hue="earth"] {
  --hue: var(--brand-earth-deep);
  --hue-solid: var(--brand-earth);
  --hue-rgb: var(--brand-earth-rgb);
}

/* Dark bands: inverts the semantic roles without touching the components.
   Used by the metrics band and the footer, which anchor the page tonally. */
.theme-dark {
  color-scheme: dark;

  /* Sections supply their own --section-bg (styles.css loads after this file
     and wins); the footer has none, so it takes the ground from here. */
  background-color: var(--color-bg);
  color: var(--color-text);

  --color-bg: var(--bark-800);
  --color-bg-deep: var(--bark-900);
  --color-surface: var(--bark-700);
  --color-surface-raised: var(--bark-700);
  --color-border: rgb(248 243 234 / 0.14);
  --color-border-strong: rgb(248 243 234 / 0.26);
  --color-text: var(--sand-100);
  --color-text-muted: #d8cbb8;
  --color-text-soft: #ab9c88;
  --color-accent: var(--brand-earth-lit);
  --color-accent-solid: var(--brand-earth);
  --color-focus: var(--brand-earth-lit);

  --hue: var(--brand-earth-lit);
}

/* Against the bark background the lightened variants return: the deepened
   ones do not reach the minimum contrast. */
.theme-dark [data-hue="purple"] {
  --hue: var(--brand-purple-lit);
}

.theme-dark [data-hue="turquoise"] {
  --hue: var(--brand-turquoise-lit);
}

.theme-dark [data-hue="green"] {
  --hue: var(--brand-green-lit);
}

.theme-dark [data-hue="earth"] {
  --hue: var(--brand-earth-lit);
}