/* Design tokens — Elektrohertz Brand Guidelines v2.0.
 *
 * Source of truth is the token table in the design handoff README. Nothing here
 * is invented and no colour outside this file may be introduced.
 *
 * The 60/30/10 rule caps orange at ~10% of any screen: it is reserved for
 * primary CTAs, eyebrow labels, numerals, active states and map pins.
 */

:root {
  /* ---- Colour ---- */
  --eh-navy:          #01204E;  /* primary surface, headings, secondary buttons */
  --eh-ink:           #011433;  /* utility bar, footer, darkest sections */
  --eh-orange:        #FF5F00;  /* primary CTA, labels, numerals, pins */
  --eh-orange-deep:   #C24500;  /* orange text on light, hover/pressed */
  --eh-slate:         #33445F;  /* body copy */
  /* Brand steel is #6E819B. Used as text on white it measures 3.98:1 and on
     mist 3.64:1 — both below the 4.5:1 WCAG AA needs for normal text, and it
     was failing in 24 places (captions, meta, form hints, breadcrumbs, labels).
     The brand manual's note that "steel on white passes at 14px+" is wrong:
     WCAG treats 14px as large only when bold, and even then this is marginal.
     #607188 is the smallest darkening that clears 4.5:1 on both backgrounds —
     visually near-identical, and it makes the caption text legible, which was
     the complaint. --eh-steel-brand keeps the exact brand value for any
     non-text use. */
  --eh-steel:         #607188;  /* meta, captions, secondary labels */
  --eh-steel-brand:   #6E819B;  /* exact brand value — non-text use only */
  --eh-line:          #D6DEE8;  /* rules and borders */
  --eh-mist:          #F2F5F9;  /* alternating section background */
  --eh-white:         #FFFFFF;
  --eh-placeholder:   #E1E7EF;  /* photography slots — temporary */

  /* Tints for text on dark surfaces */
  --eh-on-dark-body:      #B9C7DA;
  --eh-on-dark-secondary: #9FB0C8;
  --eh-on-dark-meta:      #7E92AF;
  --eh-on-dark-chip:      #E9EEF6;
  --eh-on-dark-orange:    #FF9E5E;
  --eh-on-dark-border:    rgba(255, 255, 255, 0.18);
  --eh-on-dark-border-2:  rgba(255, 255, 255, 0.22);

  /* A deeper navy used behind the hero photo column */
  --eh-navy-2:        #0A2C60;

  /* ---- Type ---- */
  --eh-font: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Desktop scale */
  /* Design spec is 40–42px. Set slightly under it because the homepage hero
     lost its spec chips and stat strip, so the H1 now carries that column on
     its own and read heavy at 42. Also buys headroom for German, which runs
     25–35% longer and is called out against this exact headline in the
     handoff. Mobile stays at 27px — the crowding was desktop-only. */
  --eh-h1:            38px;
  --eh-h2:            29px;
  --eh-h3:            21px;
  --eh-card-title:    19px;
  --eh-lead:          16px;
  --eh-body:          14.5px;
  --eh-data-value:    14px;
  --eh-eyebrow:       10.5px;
  --eh-meta:          12px;

  /* ---- Spacing ---- */
  --eh-gutter:        80px;   /* desktop page gutter; ~1280px content in 1440 */
  --eh-section-y:     76px;
  --eh-maxw:          1440px;

  /* ---- Motion ---- */
  --eh-transition:    150ms ease-out;

  /* ---- Focus ---- */
  --eh-focus:         2px solid var(--eh-orange);
  --eh-focus-offset:  2px;
}

@media (max-width: 767px) {
  :root {
    --eh-h1:         27px;
    --eh-h2:         23px;
    --eh-h3:         17.5px;
    --eh-card-title: 16.5px;
    --eh-lead:       13.5px;
    --eh-body:       13.5px;
    --eh-data-value: 12.5px;
    --eh-eyebrow:    9.5px;
    --eh-meta:       11px;
    --eh-gutter:     16px;
    --eh-section-y:  30px;
  }
}