/* =========================================================
   EPB — Colors & Type tokens
   ---------------------------------------------------------
   Typography stack:
   - Display / titles: Gotham Bold/Black (real licensed woff2
     files now live in /fonts — extracted from the brand site).
   - UI: Gotham Medium.
   - Body: Open Sans 400.
   - Numbers: JetBrains Mono (tabular-nums).
   Montserrat is kept only as a no-FOIT fallback.
   Never use italic — use weight 600 for emphasis instead.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Open+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Gotham (licensed) ----------
   Real Gotham web-font, self-hosted in fonts/. Paths are relative
   to project root; adjust ../ depth when importing this file from a
   nested folder. Montserrat stays the metric fallback. */
@font-face { font-family: 'Gotham'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Gotham-Book.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Gotham-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Gotham-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Gotham-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Gotham-Black.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Gotham-Black.woff2') format('woff2'); }

:root {
  /* ---------- PALETTE ---------- */

  /* Primary text — never pure black */
  --epb-navy:            #07294D;
  --epb-navy-soft:       #7E9BC7;   /* secondary navy */
  --epb-ice:             #E6F1FF;   /* ice blue surface */

  /* Accent — one orange moment per viewport */
  --epb-orange:          #EA6927;
  --epb-peach:           #F8C5B1;

  /* Surfaces */
  --epb-white:           #FFFFFF;
  --epb-gray-soft:       #F9FAFB;   /* app background */
  --epb-gray-line:       #E5E9F0;   /* hairline borders (blue undertone) */
  --epb-gray-mute:       #B9C2CE;   /* muted text, disabled */

  /* Dark surfaces — for confidence / navy sections */
  --epb-dark-1:          #1B242A;
  --epb-dark-2:          #26333A;

  /* ---------- SEMANTIC COLOR ---------- */
  --fg-1:                var(--epb-navy);        /* primary text */
  --fg-2:                #2F4A6B;                /* secondary text — navy shifted */
  --fg-3:                #5E7590;                /* tertiary / meta */
  --fg-mute:             var(--epb-gray-mute);
  --fg-on-dark:          var(--epb-white);
  --fg-on-accent:        var(--epb-white);

  --bg-1:                var(--epb-white);
  --bg-2:                var(--epb-gray-soft);
  --bg-3:                var(--epb-ice);
  --bg-confidence:       var(--epb-navy);        /* "sections confiance" */
  --bg-dark:             var(--epb-dark-1);

  --border-1:            var(--epb-gray-line);
  --border-2:            #D6DCE6;
  --border-strong:       var(--epb-navy);

  --accent:              var(--epb-orange);
  --accent-hover:        #D15C22;
  --accent-press:        #B8501C;

  --focus-ring:          var(--epb-orange);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:        'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-ui:             'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:           'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* weights */
  --fw-regular:          400;  /* @kind font */
  --fw-medium:           500;  /* @kind font */
  --fw-semibold:         600;  /* @kind font */
  --fw-bold:             700;  /* @kind font */
  --fw-black:            800;  /* @kind font */

  /* sizes — modest, grounded scale */
  --fs-xs:               12px;
  --fs-sm:               14px;
  --fs-base:             16px;
  --fs-md:               18px;
  --fs-lg:               20px;
  --fs-xl:               24px;
  --fs-2xl:              32px;
  --fs-3xl:              40px;
  --fs-4xl:              56px;
  --fs-5xl:              72px;

  --lh-tight:            1.1;    /* @kind font */
  --lh-snug:             1.25;   /* @kind font */
  --lh-normal:           1.45;   /* @kind font */
  --lh-body:             1.6;    /* @kind font */

  --tracking-tight:      -0.01em; /* @kind font */
  --tracking-normal:     0;       /* @kind font */
  --tracking-wide:       0.08em;  /* @kind font */
  --tracking-xwide:      0.14em;  /* @kind font */

  /* ---------- SPACING ---------- */
  --sp-0:                0;       /* @kind 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;
  --sp-10:               128px;

  /* ---------- RADII (no pills — max 8px) ---------- */
  --r-xs:                2px;
  --r-sm:                4px;         /* buttons */
  --r-md:                6px;         /* buttons larger */
  --r-lg:                8px;         /* cards */
  --r-none:              0;           /* @kind radius */

  /* ---------- BORDERS ---------- */
  --bw-1:                1px;         /* @kind spacing */
  --bw-2:                2px;         /* @kind spacing */

  /* ---------- MOTION ---------- */
  --ease-standard:       cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur-fast:            120ms;       /* @kind other */
  --dur-base:            180ms;       /* @kind other */
  --dur-slow:            260ms;       /* @kind other */

  /* NOTE: No drop shadows on cards/buttons. Elevation is carried by border + surface color. */
}

/* =========================================================
   Base element styles
   ========================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Gotham (Montserrat) */
h1, h2, h3, h4, h5, h6,
.epb-display,
.epb-h1, .epb-h2, .epb-h3, .epb-h4, .epb-h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.epb-display {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-normal);
  line-height: 0.95;
}

h1, .epb-h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); }
h2, .epb-h2 { font-size: var(--fs-3xl); }
h3, .epb-h3 { font-size: var(--fs-2xl); }
h4, .epb-h4 { font-size: var(--fs-xl); }
h5, .epb-h5 { font-size: var(--fs-lg); }

/* UPPERCASE eyebrow / UI label */
.epb-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

/* Body */
p, .epb-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.epb-lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
}

small, .epb-small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Numbers / stats */
.epb-num,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Emphasis — NEVER italic */
em, i, .epb-em {
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* Links */
a {
  color: var(--epb-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent); }

/* Focus */
:focus-visible {
  outline: var(--bw-2) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Selection */
::selection { background: var(--epb-peach); color: var(--epb-navy); }