/* ────────────────────────────────────────────────────────────────
   EDF App — Design Tokens
   Extracted from the "(AI)Test_APP Composants" Figma library.
   Base values come straight from the file's usage counts:
   - #005BFF is the hero brand color (~400+ uses)
   - #001A70 is the deep brand navy (headlines on white)
   - #FE5815 is the historic EDF orange (logo accent)
   - EDF 2020 is the custom brand font, with Inter as the screen
     UI companion.
   Fonts "EDF 2020" are proprietary — we're substituting Google
   Fonts "DM Sans" until the real TTFs are provided.
   ──────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ── EDF 2020 (brand font, provided by EDF) ─────────────────── */
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020-ExtraLight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EDF 2020";
  src: url("./fonts/EDF2020-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── EDF 2020 Soft (italic companion family) ────────────────── */
@font-face {
  font-family: "EDF 2020 Soft";
  src: url("./fonts/EDF2020Soft-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EDF 2020 Soft";
  src: url("./fonts/EDF2020Soft-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EDF 2020 Soft";
  src: url("./fonts/EDF2020Soft-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ── Brand palette ──────────────────────────────────────────── */
  --edf-blue:            #005BFF;   /* Primary brand blue        */
  --edf-blue-dark:       #001A70;   /* Deep navy / headlines     */
  --edf-blue-deep:       #0A1438;   /* Near-black navy           */
  --edf-blue-press:      #1057C8;   /* Pressed / hover blue      */
  --edf-blue-bright:     #1089FF;   /* Secondary bright blue     */
  --edf-blue-050:        #E9F1F9;   /* Tinted surface            */
  --edf-blue-100:        #D6E4F4;
  --edf-blue-200:        #A9C4E9;

  --edf-orange:          #FE5815;   /* Historic logo orange      */
  --edf-orange-warm:     #FF861D;   /* Energy/warm accent        */
  --edf-orange-deep:     #E77613;   /* Data/charts (tarif rouge) */
  --edf-violet:          #9747FF;   /* Dev/spec accent           */

  /* ── Neutral greys (from METADATA) ──────────────────────────── */
  --edf-ink-900:         #1C1C1C;   /* Primary ink / body copy   */
  --edf-ink-800:         #1C1C1E;   /* iOS system ink            */
  --edf-ink-700:         #333333;
  --edf-ink-600:         #666666;   /* Most-used neutral (1100×) */
  --edf-ink-500:         #6B6B6B;
  --edf-ink-400:         #8C8C9E;
  --edf-ink-350:         #616670;   /* Caption grey              */
  --edf-ink-300:         #999999;
  --edf-ink-200:         #CCCCCC;
  --edf-ink-150:         #E0E0E0;
  --edf-ink-100:         #F4F4F4;
  --edf-ink-050:         #F5F5F7;
  --edf-ink-025:         #F8F7F7;   /* App surface grey          */
  --edf-white:           #FFFFFF;
  --edf-black:           #000000;

  /* ── Semantic (offres / status) ─────────────────────────────── */
  --edf-success:         #43842A;   /* Heures creuses / ok        */
  --edf-success-bg:      #E5F4DE;
  --edf-danger:          #E10000;   /* Heures pleines / alerte    */
  --edf-danger-bg:       #FFEAEA;
  --edf-warning:         #FF861D;
  --edf-info:            #005BFF;

  /* Tarif / offres coding (from /Color-offres) */
  --edf-tarif-bleu:      #005BFF;
  --edf-tarif-blanc:     #F8F7F7;
  --edf-tarif-rouge:     #E10000;
  --edf-tarif-hc:        #43842A;   /* Heures creuses */
  --edf-tarif-hp:        #E77613;   /* Heures pleines */

  /* ── Semantic foreground / background ───────────────────────── */
  --fg-1:                var(--edf-ink-900);   /* headings, strong body */
  --fg-2:                var(--edf-ink-600);   /* secondary body        */
  --fg-3:                var(--edf-ink-350);   /* caption / meta        */
  --fg-on-brand:         var(--edf-white);
  --fg-link:             var(--edf-blue);

  --bg-app:              var(--edf-white);
  --bg-surface:          var(--edf-white);
  --bg-surface-2:        var(--edf-ink-025);   /* tiles / cards */
  --bg-surface-3:        var(--edf-ink-050);
  --bg-brand:            var(--edf-blue);
  --bg-brand-deep:       var(--edf-blue-dark);
  --bg-tint-blue:        var(--edf-blue-050);

  --border-subtle:       rgba(0,0,0,0.08);
  --border-default:      var(--edf-ink-150);
  --border-strong:       var(--edf-ink-600);
  --border-focus:        var(--edf-blue);

  /* ── Typography families ────────────────────────────────────── */
  --font-display:        "EDF 2020", "Helvetica Neue", Arial, sans-serif;
  --font-display-soft:   "EDF 2020 Soft", "EDF 2020", "Helvetica Neue", Arial, sans-serif;
  --font-ui:             "EDF 2020", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono:           "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── Type scale (mobile — EDF App is 375pt) ─────────────────── */
  --fs-display-1: 60px;  --lh-display-1: 64px;  /* cover / big hero   */
  --fs-display-2: 40px;  --lh-display-2: 44px;  /* section hero       */
  --fs-h1:        24px;  --lh-h1: 28px;         /* screen titles      */
  --fs-h2:        18px;  --lh-h2: 24px;         /* card titles        */
  --fs-h3:        16px;  --lh-h3: 22px;         /* tile titles        */
  --fs-body:      14px;  --lh-body: 20px;       /* default body       */
  --fs-body-sm:   13px;  --lh-body-sm: 18px;
  --fs-caption:   12px;  --lh-caption: 16px;
  --fs-micro:     10px;  --lh-micro: 14px;      /* badges             */

  /* ── Spacing (4-pt base) ────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* strips, pills internal */
  --radius-lg:  16px;   /* tiles / carte          */
  --radius-xl:  24px;
  --radius-2xl: 30px;   /* sections / hero cards  */
  --radius-pill: 999px; /* CTAs, badges, chips    */

  /* ── Shadow / elevation ─────────────────────────────────────── */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(0,26,112,0.06);
  --shadow-2:  0 4px 12px rgba(0,26,112,0.08);
  --shadow-3:  0 12px 32px rgba(0,26,112,0.12);
  --shadow-press-inset: inset 0 0 0 1px rgba(0,0,0,0.08);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-std:  cubic-bezier(.2,.0,.0,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  120ms;
  --dur-std:   200ms;
  --dur-slow:  320ms;
}

/* ── Base type rules (semantic) ──────────────────────────────── */
html, body {
  font-family: var(--font-ui);
  color: var(--fg-1);
  background: var(--bg-app);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--edf-blue-dark);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
  margin: 0;
}
.display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  letter-spacing: -0.02em;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: -0.01em;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.micro   { font-size: var(--fs-micro);   line-height: var(--lh-micro); letter-spacing: 0.02em; text-transform: uppercase; }

a, .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

code, pre, .mono { font-family: var(--font-mono); font-size: 13px; }

/* ── Utility helpers for cards ───────────────────────────────── */
.edf-card {
  background: var(--bg-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.edf-tile {
  background: var(--bg-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.edf-pill-primary {
  background: var(--edf-blue);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 13px 16px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  border: 1px solid var(--edf-blue);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.edf-pill-secondary {
  background: #fff;
  color: var(--edf-blue);
  border: 1px solid var(--edf-blue);
  border-radius: var(--radius-pill);
  padding: 13px 16px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.edf-badge {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 500;
  background: var(--edf-ink-100);
  color: var(--fg-1);
}
.edf-badge--ok   { background: var(--edf-success-bg); color: var(--edf-success); }
.edf-badge--warn { background: var(--edf-danger-bg);  color: var(--edf-danger); }
.edf-badge--info { background: var(--edf-blue-050);   color: var(--edf-blue); }