/* =========================================================
   Regard-Soignant — Design System Tokens
   colors_and_type.css
   ========================================================= */

/* ─── Webfonts ─────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}

/* ─── Base Color Palette ───────────────────────────────── */
:root {
  /* Brand primaries */
  --color-navy:        #24408E;   /* Bleu marine — dominant */
  --color-teal:        #00AAAD;   /* Teal — accent */
  --color-white:       #FFFFFF;
  --color-charcoal:    #1C1C2E;   /* Gris anthracite — texte principal */
  --color-surface:     #F5F7FA;   /* Gris très clair — fond de page */

  /* Derived / extended palette */
  --color-navy-dark:   #1a3070;   /* hover navy */
  --color-navy-light:  #3a5aaa;   /* lighter tint */
  --color-teal-dark:   #008a8c;   /* hover teal */
  --color-teal-light:  #e0f6f6;   /* teal ghost/background */
  --color-navy-ghost:  #eef1f8;   /* navy ghost/background */

  /* Neutral grays */
  --color-gray-100:    #F5F7FA;
  --color-gray-200:    #E8ECF2;
  --color-gray-300:    #CDD3DE;
  --color-gray-400:    #9BA5B5;
  --color-gray-500:    #6B7687;
  --color-gray-600:    #4A5568;
  --color-gray-700:    #2D3748;
  --color-gray-800:    #1C1C2E;

  /* Semantic / functional */
  --color-text-primary:    var(--color-charcoal);
  --color-text-secondary:  var(--color-gray-500);
  --color-text-inverse:    var(--color-white);
  --color-text-accent:     var(--color-teal);
  --color-text-brand:      var(--color-navy);

  --color-bg-page:         var(--color-surface);
  --color-bg-card:         var(--color-white);
  --color-bg-brand:        var(--color-navy);
  --color-bg-accent:       var(--color-teal);

  --color-border:          var(--color-gray-200);
  --color-border-focus:    var(--color-teal);

  /* ─── Typography Scales ──────────────────────────────── */
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Open Sans', sans-serif;

  /* Font weights */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* Font sizes — fluid scale */
  --fs-xs:    0.75rem;    /*  12px */
  --fs-sm:    0.875rem;   /*  14px */
  --fs-base:  1rem;       /*  16px */
  --fs-md:    1.125rem;   /*  18px */
  --fs-lg:    1.25rem;    /*  20px */
  --fs-xl:    1.5rem;     /*  24px */
  --fs-2xl:   1.875rem;   /*  30px */
  --fs-3xl:   2.25rem;    /*  36px */
  --fs-4xl:   3rem;       /*  48px */
  --fs-5xl:   3.75rem;    /*  60px */

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* ─── Spacing Scale ──────────────────────────────────── */
  --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;
  --space-24:  96px;

  /* ─── Border Radius ──────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(28,28,46,0.06), 0 1px 2px rgba(28,28,46,0.04);
  --shadow-md:   0 4px 12px rgba(28,28,46,0.08), 0 2px 4px rgba(28,28,46,0.04);
  --shadow-lg:   0 8px 24px rgba(28,28,46,0.10), 0 4px 8px rgba(28,28,46,0.05);
  --shadow-card: 0 2px 8px rgba(36,64,142,0.07), 0 0 0 1px rgba(36,64,142,0.04);

  /* ─── Transitions ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ─── Semantic Element Styles ─────────────────────────── */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-navy);
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-navy);
}

h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-navy);
}

h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-navy);
}

h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-navy);
}

h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-600);
}

strong, b {
  font-weight: var(--fw-semibold);
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

a {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-teal-dark); }