/* ============================================================
   IHG eMethanol — Colors & Typography Foundation
   TECNOLOGIA IHG GREENH2 S.L. (Iberian Hydrogen Group)
   ============================================================ */

/* ---------- FONTS ---------- */
/* Starter package uses hosted Google Fonts so no local font files are required. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap");


:root {
  /* ============================================================
     PALETTE A — MOLECULAR (Version 1 recommended primary)
     Deep petrol teal. Prints excellently as spot color.
     Signals: sea + industry + methanol chemistry.
     ============================================================ */
  --pa-primary:      #0E5E5E;   /* Deep petrol teal — brand primary */
  --pa-primary-dark: #063A3A;   /* Ink teal — headings on light */
  --pa-primary-tint: #E6F1F1;   /* Soft mist — surfaces / hover */
  --pa-accent:       #C3E85D;   /* Signal lime — CTA / highlight */
  --pa-ink:          #0A1414;   /* Near-black ink */
  --pa-paper:        #FAFAF7;   /* Warm off-white */

  /* ============================================================
     PALETTE B — IBERIAN LOOP (Version 2)
     Deep forest green. Circular-economy energy. Prints as spot.
     ============================================================ */
  --pb-primary:      #1B4332;   /* Deep forest green — brand primary */
  --pb-primary-dark: #0B2A1F;   /* Pine ink */
  --pb-primary-tint: #EAF1EC;   /* Sage mist */
  --pb-accent:       #E5A853;   /* Amber — warmth / methanol amber */
  --pb-ink:          #101614;   /* Near-black */
  --pb-paper:        #F6F4EE;   /* Warm cream */

  /* ============================================================
     PALETTE C — REFINED IBERIAN (Version 3)
     Deep navy + warm sand accent. European, mature, print-safe.
     ============================================================ */
  --pc-primary:      #0D1B2A;   /* Deep navy — brand primary */
  --pc-primary-dark: #050B14;   /* Ink navy */
  --pc-primary-tint: #E9EDF2;   /* Cool mist */
  --pc-accent:       #C68A5B;   /* Terracotta / warm sand */
  --pc-ink:          #0A0F16;
  --pc-paper:        #F4EFE7;   /* Iberian sand */

  /* ============================================================
     ACTIVE BRAND TOKENS
     Default = Palette A (Molecular / petrol teal).
     Swap by resetting these to --pb-* or --pc-*.
     ============================================================ */
  --brand-primary:      var(--pa-primary);
  --brand-primary-dark: var(--pa-primary-dark);
  --brand-primary-tint: var(--pa-primary-tint);
  --brand-accent:       var(--pa-accent);
  --brand-ink:          var(--pa-ink);
  --brand-paper:        var(--pa-paper);

  /* ---------- SEMANTIC TOKENS ---------- */
  --fg-1: var(--brand-ink);              /* Primary text */
  --fg-2: #3A4747;                        /* Secondary text */
  --fg-3: #6B7676;                        /* Tertiary / meta */
  --fg-inverse: #FFFFFF;
  --fg-on-brand: #FFFFFF;

  --bg-1: var(--brand-paper);             /* Page background */
  --bg-2: #FFFFFF;                        /* Card surface */
  --bg-3: var(--brand-primary-tint);      /* Muted surface */
  --bg-brand: var(--brand-primary);

  --border-1: #DFE3E1;                    /* Hairline */
  --border-2: #C5CCC9;                    /* Standard */
  --border-strong: var(--brand-ink);

  --status-success: #1B7F4F;
  --status-warning: #C88A2E;
  --status-danger:  #B0453A;
  --status-info:    var(--brand-primary);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 84px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.16em;   /* Used in tagline */

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 20, 20, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 20, 20, 0.08);
  --shadow-lg: 0 18px 48px rgba(10, 20, 20, 0.12);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasize: cubic-bezier(0.16, 0.9, 0.28, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ---------- SEMANTIC TYPOGRAPHY ---------- */
.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 84px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.p, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.tagline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.serif-editorial {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  color: var(--fg-1);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

/* ---------- THEME SWITCH HELPERS ---------- */
[data-palette="b"] {
  --brand-primary:      var(--pb-primary);
  --brand-primary-dark: var(--pb-primary-dark);
  --brand-primary-tint: var(--pb-primary-tint);
  --brand-accent:       var(--pb-accent);
  --brand-ink:          var(--pb-ink);
  --brand-paper:        var(--pb-paper);
}
[data-palette="c"] {
  --brand-primary:      var(--pc-primary);
  --brand-primary-dark: var(--pc-primary-dark);
  --brand-primary-tint: var(--pc-primary-tint);
  --brand-accent:       var(--pc-accent);
  --brand-ink:          var(--pc-ink);
  --brand-paper:        var(--pc-paper);
}