/* ============================================================
   ERISA — Design Tokens
   Electrificaciones Riojanas, S.A.
   Industrial electrical & thermal installations · founded 1976
   ============================================================ */

/* -- Webfonts (substitutions — see README) --
   ERISA has no public web stack; we substitute Google Fonts that
   match the industrial wordmark + uppercase-navigation pattern
   observed on erisa.es:
   - Display / headings:   Barlow Condensed (bold uppercase)
   - Body / UI:            Open Sans (regular, semibold)
   --------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap");

:root {
  /* ── BRAND COLORS ──────────────────────────────────────────── */
  /* Primary navy — sampled from the "erisa" wordmark */
  --erisa-navy-900: #022a52;   /* deepest — backgrounds, footers */
  --erisa-navy-800: #033c75;   /* hover/pressed states on navy */
  --erisa-navy-700: #024d8e;   /* PRIMARY — logo, links, buttons */
  --erisa-navy-600: #1463a8;   /* hover for primary buttons */
  --erisa-navy-500: #2b7cc4;   /* secondary surfaces */
  --erisa-navy-100: #d6e3f1;   /* tints / hover backgrounds */
  --erisa-navy-50:  #eef3f9;   /* page section tint */

  /* Accent lime green — the "flecha verde" of the logomark */
  --erisa-lime-700: #6f9332;
  --erisa-lime-600: #82a942;
  --erisa-lime-500: #97b652;   /* ACCENT — arrow, CTAs, callouts */
  --erisa-lime-400: #abc66e;
  --erisa-lime-100: #e6efd2;

  /* Neutrals — warm-cool greys for industrial photography backdrop */
  --erisa-ink:      #11171f;   /* body copy on light */
  --erisa-graphite: #2d3640;
  --erisa-slate:    #5a6573;
  --erisa-steel:    #8b95a3;
  --erisa-fog:      #c5cdd7;
  --erisa-mist:     #e4e8ee;
  --erisa-cloud:    #f3f5f8;
  --erisa-paper:    #ffffff;

  /* Semantic — small, professional palette */
  --erisa-success: #4f8a3a;    /* green — paired with lime family */
  --erisa-warning: #d28a16;    /* amber — caution, ratings */
  --erisa-danger:  #b8362a;    /* corporate red, not pop red */
  --erisa-info:    var(--erisa-navy-700);

  /* ── FOREGROUND / BACKGROUND TOKENS ────────────────────────── */
  --fg-1: var(--erisa-ink);          /* primary body */
  --fg-2: var(--erisa-graphite);     /* secondary */
  --fg-3: var(--erisa-slate);        /* tertiary, meta */
  --fg-4: var(--erisa-steel);        /* disabled, captions */
  --fg-inv: #ffffff;                 /* on dark surfaces */
  --fg-brand: var(--erisa-navy-700);
  --fg-accent: var(--erisa-lime-700);

  --bg-1: var(--erisa-paper);        /* page */
  --bg-2: var(--erisa-cloud);        /* alt section */
  --bg-3: var(--erisa-mist);         /* card surface on bg-2 */
  --bg-inv: var(--erisa-navy-900);   /* footers, dark hero */
  --bg-brand: var(--erisa-navy-700);
  --bg-accent: var(--erisa-lime-500);

  --border-1: var(--erisa-mist);     /* hairlines */
  --border-2: var(--erisa-fog);      /* form fields */
  --border-strong: var(--erisa-graphite);

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Type scale — generous for an industrial b2b context */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-52: 3.25rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;     /* uppercase nav, eyebrow */
  --tracking-wider: 0.12em;     /* section eyebrows, certs */

  /* ── SPACING ──────────────────────────────────────────────── */
  --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 ────────────────────────────────────────────────── */
  /* ERISA's web aesthetic is square — minimal rounding. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ── SHADOWS ──────────────────────────────────────────────── */
  /* Restrained, technical. No diffuse marketing glows. */
  --shadow-1: 0 1px 2px rgba(2, 42, 82, 0.08);
  --shadow-2: 0 2px 6px rgba(2, 42, 82, 0.10), 0 1px 2px rgba(2, 42, 82, 0.06);
  --shadow-3: 0 8px 24px rgba(2, 42, 82, 0.12), 0 2px 6px rgba(2, 42, 82, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ── MOTION ───────────────────────────────────────────────── */
  /* Quick, mechanical — this is industrial software, not a toy. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --maxw-prose: 68ch;
  --maxw-container: 1200px;
  --maxw-narrow: 880px;
}

/* ============================================================
   SEMANTIC TYPE STYLES — composable utility classes
   ============================================================ */

.eyebrow,
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--erisa-navy-700);
}

.h1, h1.erisa, .t-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.4vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--erisa-navy-900);
  text-wrap: balance;
}

.h2, h2.erisa, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, var(--fs-52));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--erisa-navy-900);
}

.h3, h3.erisa, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--erisa-navy-800);
  letter-spacing: var(--tracking-wide);
}

.h4, h4.erisa, .t-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--erisa-navy-800);
}

.lead, .t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
}

p.erisa, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.t-small, small.erisa {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--erisa-navy-800);
  border-left: 3px solid var(--erisa-lime-500);
  padding-left: var(--space-5);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}

/* Link style — utilitarian, underline-on-hover */
a.erisa,
.t-link {
  color: var(--erisa-navy-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a.erisa:hover,
.t-link:hover {
  color: var(--erisa-lime-700);
  border-bottom-color: currentColor;
}