/* ─────────────────────────────────────────────────────────────
   Idside Design System — Tokens
   Sources: Figma "[ID.Side] Design system.fig" + Marketing brief
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Primary (Idside Navy / "Bleu marine") ─────────────────── */
  --idside-navy-900: #0A2563;   /* brand primary, hero, navbar */
  --idside-navy-800: #173579;
  --idside-navy-700: #203F86;   /* primary 700 in figma */
  --idside-navy-600: #294891;
  --idside-navy-500: #2F509A;
  --idside-navy-400: #5169A8;
  --idside-navy-300: #7083B6;
  --idside-navy-200: #98A6CB;
  --idside-navy-100: #C0C9E0;
  --idside-navy-50:  #E6E9F2;

  /* ── Neutral (gray) ───────────────────────────────────────── */
  --gray-900: #282828;          /* body text */
  --gray-800: #4A4A4A;          /* secondary text */
  --gray-700: #696969;
  --gray-600: #7E7E7E;
  --gray-500: #A7A7A7;
  --gray-400: #C6C6C6;
  --gray-300: #E0E0E0;
  --gray-200: #F2F2F2;
  --gray-150: #F4F4F4;          /* page-level neutral background */
  --gray-100: #F6F6F6;
  --gray-50:  #FBFBFB;
  --white:    #FFFFFF;
  --black:    #000000;

  /* ── Accent / Alerte (Rouge vif) ───────────────────────────── */
  --red-900: #B21F1D;
  --red-800: #C12929;
  --red-700: #CE3030;
  --red-600: #E03A36;
  --red-500: #EF4337;           /* base */
  --red-400: #EA5350;
  --red-300: #E17373;
  --red-200: #EC999A;
  --red-100: #FDCDD2;
  --red-50:  #FEEBEE;
  --idside-red: #FB3640;        /* brand accent (logo dot, CTA hover) */

  /* ── Electric Blue (info / link) ──────────────────────────── */
  --blue-900: #0019A2;
  --blue-800: #002FB4;
  --blue-700: #0039BF;
  --blue-600: #0644CB;          /* base 500* */
  --blue-500: #114CD6;
  --blue-400: #4968DD;
  --blue-300: #6E84E3;
  --blue-200: #9AA6EB;
  --blue-100: #CAD9F8;
  --blue-50:  #E7EAFA;

  /* ── Green (success) ──────────────────────────────────────── */
  --green-900: #005F39;
  --green-800: #007F4E;
  --green-700: #04905A;
  --green-600: #10A367;
  --green-500: #18B272;         /* base */
  --green-400: #49BE87;
  --green-300: #6DC99C;
  --green-200: #99D8B7;
  --green-100: #C1E7D3;
  --green-50:  #E5F5ED;

  /* ── Yellow (warning) ─────────────────────────────────────── */
  --yellow-900: #FF6C00;
  --yellow-800: #FF8D00;
  --yellow-700: #FF9E00;
  --yellow-600: #FEB200;
  --yellow-500: #FDC000;        /* 400* base in figma */
  --yellow-400: #FDC90F;
  --yellow-300: #FDD545;
  --yellow-200: #FEE07D;
  --yellow-100: #FEECB0;
  --yellow-50:  #FFF8E0;

  /* ── Alpha basics ─────────────────────────────────────────── */
  --black-alpha-20: rgba(40,40,40,0.20);
  --dark-blue-alpha-15: rgba(10,37,99,0.15);
  --shadow-card: 0 2px 8px rgba(66,74,85,0.09);
  --shadow-elevated: 0 6px 24px rgba(66,74,85,0.12);
  --shadow-modal: 0 16px 48px rgba(10,37,99,0.18);

  /* ── Semantic tokens ──────────────────────────────────────── */
  --color-bg-page:        var(--gray-150);
  --color-bg-surface:     var(--white);
  --color-bg-muted:       var(--gray-100);
  --color-bg-inverse:     var(--idside-navy-900);

  --color-fg-primary:     var(--gray-900);   /* body */
  --color-fg-secondary:   var(--gray-800);
  --color-fg-tertiary:    var(--gray-600);
  --color-fg-muted:       var(--gray-500);
  --color-fg-on-inverse:  var(--white);
  --color-fg-brand:       var(--idside-navy-900);
  --color-fg-link:        var(--blue-600);

  --color-border-subtle:  var(--idside-navy-50);
  --color-border-default: var(--idside-navy-100);
  --color-border-strong:  var(--gray-400);
  --color-border-focus:   var(--idside-navy-700);

  --color-accent:         var(--idside-red);
  --color-success:        var(--green-500);
  --color-warning:        var(--yellow-500);
  --color-danger:         var(--red-500);
  --color-info:           var(--blue-600);

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-full: 1000px;

  /* ── Spacing scale ────────────────────────────────────────── */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* ── Type — fonts ─────────────────────────────────────────── */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Type — desktop scale (Figma "Font web" / Desktop) ────── */
  --type-display1-size: 45px;   --type-display1-weight: 700;
  --type-display2-size: 37px;   --type-display2-weight: 700;
  --type-title1-size:   31px;   --type-title1-weight:   700;
  --type-title2-size:   26px;   --type-title2-weight:   700;
  --type-title3-size:   22px;   --type-title3-weight:   700;
  --type-body1-size:    18px;   --type-body1-weight:    400;
  --type-body2-size:    16px;   --type-body2-weight:    400;
  --type-body3-size:    14px;   --type-body3-weight:    400;
  --type-caption1-size: 12px;
  --type-caption2-size: 10px;

  /* ── Type — mobile scale (Figma "Font web" / Mobile) ──────── */
  --type-m-display2-size: 30px;
  --type-m-title1-size:   26px;
  --type-m-title2-size:   22px;
  --type-m-title3-size:   20px;
  --type-m-body1-size:    16px;

  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;
  --tracking-default: 0.030em;
}

/* ── Semantic typography ───────────────────────────────────── */
html { font-family: var(--font-sans); color: var(--color-fg-primary); }

h1, .h-display1 {
  font-family: var(--font-display);
  font-weight: var(--type-display1-weight);
  font-size: var(--type-display1-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-default);
  color: var(--color-fg-brand);
  margin: 0;
}
h2, .h-title1 {
  font-weight: var(--type-title1-weight);
  font-size: var(--type-title1-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-default);
  color: var(--color-fg-primary);
  margin: 0;
}
h3, .h-title2 {
  font-weight: var(--type-title2-weight);
  font-size: var(--type-title2-size);
  line-height: var(--leading-tight);
  color: var(--color-fg-primary);
  margin: 0;
}
h4, .h-title3 {
  font-weight: var(--type-title3-weight);
  font-size: var(--type-title3-size);
  line-height: var(--leading-tight);
  color: var(--color-fg-primary);
  margin: 0;
}
p, .body1 {
  font-size: var(--type-body1-size);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-fg-primary);
  margin: 0;
}
.body2 { font-size: var(--type-body2-size); line-height: 1.5; }
.body3 { font-size: var(--type-body3-size); line-height: 1.45; }
.caption1 { font-size: var(--type-caption1-size); line-height: 1.4; color: var(--color-fg-tertiary); }
.caption2 { font-size: var(--type-caption2-size); line-height: 1.4; color: var(--color-fg-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }

a { color: var(--color-fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }