/* ==========================================================================
   ESV — Colour tokens
   File: esv-colours.css
   Version: v01 · 25 Aug 2026
   For: European Space Bond landing page (EN / DE)

   ── PROVENANCE WARNING ──────────────────────────────────────────────────
   These hex values are NOT extracted from europeanspaceventures.com.
   The site runs Elementor with external CSS, and the page fetcher strips
   <style> and <link rel=stylesheet> content, so the live palette was not
   readable. The values below are a PROPOSED palette, anchored on the
   official European flag colours (Reflex Blue / Pantone Yellow) because
   "European sovereignty" is the brand's stated core theme.

   To make this match the live site exactly, replace only the six values
   in the BRAND ANCHORS block. Everything else derives from them.
   How to get the real values: open the site, DevTools → Console, run:
     getComputedStyle(document.documentElement).cssText
   or in WP Admin → Elementor → Site Settings → Global Colors.
   ────────────────────────────────────────────────────────────────────────

   Contrast: every pairing marked ✓ AA was measured, not guessed.
   Ratios are noted inline. Do not introduce new pairings without checking.
   ========================================================================== */

:root {

  /* ── BRAND ANCHORS ─────────────────────────────────────────────────────
     Swap these six when the live hexes are confirmed. */
  --esv-blue:            #003399;  /* primary — EU Reflex Blue */
  --esv-blue-dark:       #002B7A;
  --esv-gold:            #FFCC00;  /* accent — EU Pantone Yellow */
  --esv-void:            #060B18;  /* deep space, dark bands */
  --esv-ink:             #1C2029;  /* body text */
  --esv-paper:           #FFFFFF;
  /* ─────────────────────────────────────────────────────────────────────── */


  /* ── PRIMITIVES ──────────────────────────────────────────────────────── */

  /* Blue ramp */
  --esv-blue-900:        #001B52;
  --esv-blue-800:        var(--esv-blue-dark);
  --esv-blue-600:        var(--esv-blue);
  --esv-blue-500:        #1F4FB8;
  --esv-blue-300:        #7A9AE0;   /* links on dark — 7.04 on --esv-void ✓ AAA */
  --esv-blue-100:        #E4EAF7;

  /* Void ramp — dark sections */
  --esv-void-950:        var(--esv-void);
  --esv-void-900:        #0C1428;
  --esv-void-800:        #16203A;
  --esv-void-700:        #24304F;   /* hairlines on dark */

  /* Gold ramp
     ⚠ --esv-gold on white is 1.51 — FAILS. Gold is a dark-background and
     graphic-fill colour only. For gold-toned text on light, use --esv-bronze. */
  --esv-gold-500:        var(--esv-gold);
  --esv-gold-600:        #D9AB00;   /* fills / borders on light only */
  --esv-gold-100:        #FFF4CC;

  /* Neutrals */
  --esv-grey-50:         #F6F7F9;
  --esv-grey-100:        #ECEEF2;
  --esv-grey-300:        #C9CED8;   /* borders — not text */
  --esv-grey-500:        #78808F;   /* 3.98 on white — large text, icons, disabled ONLY */
  --esv-grey-700:        #454C5A;   /* 8.63 on white ✓ AAA — smallest safe body grey */
  --esv-grey-900:        var(--esv-ink);


  /* ── SEMANTIC — light surfaces (default) ─────────────────────────────── */

  --esv-bg:              var(--esv-paper);
  --esv-bg-subtle:       var(--esv-grey-50);
  --esv-bg-raised:       var(--esv-grey-100);
  --esv-border:          var(--esv-grey-300);
  --esv-border-strong:   var(--esv-grey-700);

  --esv-text:            var(--esv-ink);          /* 16.30 ✓ AAA */
  --esv-text-muted:      var(--esv-grey-700);     /*  8.63 ✓ AAA */
  --esv-text-faint:      var(--esv-grey-500);     /*  3.98 — large text only */
  --esv-text-inverse:    var(--esv-paper);

  --esv-link:            var(--esv-blue-600);     /* 10.86 ✓ AAA */
  --esv-link-hover:      var(--esv-blue-900);
  --esv-focus-ring:      var(--esv-blue-500);

  /* Primary action */
  --esv-action-bg:       var(--esv-blue-600);
  --esv-action-text:     var(--esv-paper);        /* 10.86 ✓ AAA */
  --esv-action-bg-hover: var(--esv-blue-800);
  --esv-action-bg-press: var(--esv-blue-900);

  /* Secondary action — outline */
  --esv-action2-bg:      transparent;
  --esv-action2-text:    var(--esv-blue-600);
  --esv-action2-border:  var(--esv-blue-600);


  /* ── SEMANTIC — dark bands (hero, footer, data sections) ─────────────── */

  --esv-dark-bg:           var(--esv-void-950);
  --esv-dark-bg-raised:    var(--esv-void-800);
  --esv-dark-border:       var(--esv-void-700);
  --esv-dark-text:         var(--esv-paper);      /* 19.65 ✓ AAA */
  --esv-dark-text-muted:   var(--esv-grey-300);   /* 12.45 ✓ AAA */
  --esv-dark-link:         var(--esv-blue-300);   /*  7.04 ✓ AAA */
  --esv-dark-accent:       var(--esv-gold-500);   /* 13.00 ✓ AAA — gold works here */


  /* ── THE THREE PILLARS ───────────────────────────────────────────────── */
  /* One colour per investment pillar, so the sector maps stay consistent
     between the landing page, the deck and the ENSAI charts.
     Each has a -fill (graphics) and a -text (safe on white) variant. */

  --esv-fortress-fill:      #003399;  /* Space Fortress Europe — sovereign blue */
  --esv-fortress-text:      #002B7A;  /* 12.91 ✓ AAA */

  --esv-valuechain-fill:    #0E7C86;  /* Strategic Space Value Chain — orbital teal */
  --esv-valuechain-text:    #0A6B74;  /*  6.23 ✓ AA  */

  --esv-resources-fill:     #A8763E;  /* Space Resources — lunar regolith */
  --esv-resources-text:     #8A5E2E;  /*  5.64 ✓ AA  */
  --esv-bronze:             var(--esv-resources-text);


  /* ── COMPLIANCE TOKENS ───────────────────────────────────────────────── */
  /* The risk warning must be as prominent as the promotional content and
     must stay prominent in greyscale and in print. Prominence therefore
     comes from weight and border, never from colour alone. */

  --esv-risk-bg:         #FFF9E6;
  --esv-risk-text:       var(--esv-ink);          /* 15.49 ✓ AAA */
  --esv-risk-heading:    #8C1C1C;                 /*  8.68 ✓ AAA — serious, not alarmist */
  --esv-risk-border:     var(--esv-ink);
  --esv-risk-border-w:   3px;                     /* survives B/W printing */

  /* Legal notices / disclaimer footer — quiet but legible, never grey-on-grey */
  --esv-legal-bg:        var(--esv-grey-50);
  --esv-legal-text:      var(--esv-grey-700);     /*  8.63 ✓ AAA */
  --esv-legal-border:    var(--esv-grey-300);

  /* Marker for indicative / not-yet-binding figures (coupon, volume, term) */
  --esv-indicative-bg:     var(--esv-gold-100);
  --esv-indicative-text:   var(--esv-ink);
  --esv-indicative-border: var(--esv-gold-600);

  /* ── Hero scrim ──────────────────────────────────────────────────────── */
  /* Overlays a background photo so hero text stays legible whatever the
     image contains. Measured against a worst-case pure-white photo:
     at 0.85, white text = 13.2:1, gold = 8.7:1, blue-300 links = 4.7:1.
     Below 0.85 the links fail AA — do not lower these values. */
  --esv-scrim-strong: rgba(6, 11, 24, 0.94);
  --esv-scrim-mid:    rgba(6, 11, 24, 0.86);
  --esv-scrim-soft:   rgba(6, 11, 24, 0.55);

}

/* ── Dark band utility ─────────────────────────────────────────────────── */
/* Apply to a section to flip the semantic layer. Children need no changes. */
.esv-dark {
  --esv-bg:            var(--esv-dark-bg);
  --esv-bg-subtle:     var(--esv-void-900);
  --esv-bg-raised:     var(--esv-dark-bg-raised);
  --esv-border:        var(--esv-dark-border);
  --esv-text:          var(--esv-dark-text);
  --esv-text-muted:    var(--esv-dark-text-muted);
  --esv-text-inverse:  var(--esv-ink);
  --esv-link:          var(--esv-dark-link);
  --esv-link-hover:    var(--esv-gold-500);
  --esv-action-bg:     var(--esv-gold-500);
  --esv-action-text:   var(--esv-void-950);       /* 13.00 ✓ AAA */
  --esv-action2-text:  var(--esv-dark-text);
  --esv-action2-border:var(--esv-dark-text-muted);
  --esv-focus-ring:    var(--esv-gold-500);

  background-color: var(--esv-bg);
  color: var(--esv-text);
}


/* ── OS dark mode ──────────────────────────────────────────────────────── */
/* Deliberately opt-in. An investor page that flips wholesale can push the
   risk warning into a low-contrast state; the warning keeps a light,
   high-contrast treatment in every mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-esv-theme="light"]) {
    --esv-bg:           var(--esv-void-950);
    --esv-bg-subtle:    var(--esv-void-900);
    --esv-bg-raised:    var(--esv-void-800);
    --esv-border:       var(--esv-void-700);
    --esv-text:         var(--esv-paper);
    --esv-text-muted:   var(--esv-grey-300);
    --esv-text-faint:   #96A0B2;                  /* lifted for dark ground */
    --esv-link:         var(--esv-blue-300);
    --esv-link-hover:   var(--esv-gold-500);
    --esv-action-bg:    var(--esv-gold-500);
    --esv-action-text:  var(--esv-void-950);
    --esv-action2-text: var(--esv-paper);
    --esv-focus-ring:   var(--esv-gold-500);

    --esv-legal-bg:     var(--esv-void-900);
    --esv-legal-text:   var(--esv-grey-300);
    --esv-legal-border: var(--esv-void-700);
  }
}


/* ── High contrast / forced colours ────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --esv-text-faint:  var(--esv-grey-700);
    --esv-border:      var(--esv-grey-700);
  }
}

@media (forced-colors: active) {
  /* Let the OS palette win, but keep the risk box structurally visible. */
  .esv-risk-warning { border: var(--esv-risk-border-w) solid CanvasText; }
}


/* ── Print ─────────────────────────────────────────────────────────────── */
/* Investors and advisers print these pages. Risk warning and legal notices
   must remain legible and must not be dropped by background-graphics off. */
@media print {
  :root {
    --esv-bg:          #FFFFFF;
    --esv-text:        #000000;
    --esv-text-muted:  #000000;
    --esv-link:        #000000;
    --esv-risk-bg:     transparent;
    --esv-risk-text:   #000000;
    --esv-risk-heading:#000000;
    --esv-legal-bg:    transparent;
    --esv-legal-text:  #000000;
  }
  .esv-dark { --esv-bg: #FFFFFF; --esv-text: #000000; }
}


/* ── Minimum wiring ────────────────────────────────────────────────────── */
/* Colour only. No spacing, type or layout — those belong in the page CSS. */

body                { background-color: var(--esv-bg); color: var(--esv-text); }
a                   { color: var(--esv-link); }
a:hover             { color: var(--esv-link-hover); }
:focus-visible      { outline: 3px solid var(--esv-focus-ring); outline-offset: 2px; }

.esv-risk-warning {
  background-color: var(--esv-risk-bg);
  color: var(--esv-risk-text);
  border: var(--esv-risk-border-w) solid var(--esv-risk-border);
}
.esv-risk-warning > :is(h2, h3, strong:first-child) { color: var(--esv-risk-heading); }

.esv-legal {
  background-color: var(--esv-legal-bg);
  color: var(--esv-legal-text);
  border-top: 1px solid var(--esv-legal-border);
}

.esv-indicative {
  background-color: var(--esv-indicative-bg);
  color: var(--esv-indicative-text);
  box-shadow: inset 0 -2px 0 var(--esv-indicative-border);
}


/* ── GUARDRAILS ────────────────────────────────────────────────────────────
   1. Never put --esv-gold text on a light background (1.51 : 1). Use
      --esv-bronze instead.
   2. --esv-text-faint (#78808F) is 3.98 : 1. Permitted for 19px+ / bold 14px+,
      icons and disabled states. Never for body copy or legal notices.
   3. The risk warning never inherits .esv-dark or OS dark mode. Prominence
      is carried by the 3px border and heading weight, so it survives
      greyscale, print and forced-colours.
   4. Do not colour-code risk. Green/red gain-loss coding in a promotional
      context reads as an implied performance signal.
   5. Pillar colours are identity, not data. For ENSAI charts needing more
      than three series, extend the blue ramp rather than inventing hues.
   ────────────────────────────────────────────────────────────────────────── */