/*
 * Studio Smalt — Design Tokens
 * Palette : Piste 01 Smalt & Argile (dark mode)
 * Typographie : Fraunces × Plus Jakarta Sans
 * Généré automatiquement — ne pas éditer manuellement
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {

  /* ─── Couleurs brand ─── */
  --smalt-primary:       #003399;
  --smalt-secondary:     #C97D4E;
  --smalt-accent-cta:    #E8A020;
  --smalt-accent-warm:   #FFDECB;

  /* ─── Fonds (dark) ─── */
  --smalt-bg-base:       #0A0F1E;
  --smalt-bg-surface:    #111827;
  --smalt-bg-card:       #1A2035;
  --smalt-bg-input:      #0F1628;
  --smalt-bg-footer:     #060A14;

  /* ─── Fonds (light) ─── */
  --smalt-bg-light:      #F5F2EE;
  --smalt-bg-light-alt:  #EDE9E3;

  /* ─── Textes (dark mode) ─── */
  --smalt-text-primary:  #F0EDE8;   /* titres    — ratio ≥14:1 AAA */
  --smalt-text-body:     #C8CDD8;   /* corps     — ratio ≥8.8:1 AAA */
  --smalt-text-muted:    #9BA3B8;   /* secondaire — ratio ≥5.4:1 AA */
  --smalt-text-subtle:   #7A82A0;   /* labels    — ratio ≥4.5:1 AA */
  --smalt-text-on-dark:  #FFFFFF;   /* sur fond smalt #003399 */
  --smalt-text-on-cta:   #1A0F00;   /* sur fond or #E8A020 */

  /* ─── Textes (light mode) ─── */
  --smalt-text-navy:     #001A4D;   /* corps sur fond lin — ratio ≥16:1 AAA */

  /* ─── Bordures ─── */
  --smalt-border:        #2A3050;
  --smalt-border-card:   #3A4260;
  --smalt-border-light:  #D8D4CE;

  /* ─── Typographie ─── */
  --font-heading:        'Fraunces', Georgia, serif;
  --font-body:           'Plus Jakarta Sans', system-ui, sans-serif;

  /* ─── Échelle typographique ─── */
  --text-h1-size:        3.25rem;
  --text-h1-weight:      900;
  --text-h1-lh:          1.08;

  --text-h2-size:        1.875rem;
  --text-h2-weight:      700;
  --text-h2-lh:          1.18;

  --text-h3-size:        1.25rem;
  --text-h3-weight:      700;
  --text-h3-lh:          1.28;

  --text-body-size:      1rem;
  --text-body-weight:    400;
  --text-body-lh:        1.75;

  --text-small-size:     0.875rem;
  --text-small-weight:   400;
  --text-small-lh:       1.65;

  /* ─── Rayons ─── */
  --radius-sm:           6px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;
  --radius-pill:         999px;

  /* ─── Espacements ─── */
  --space-xs:            0.5rem;
  --space-sm:            1rem;
  --space-md:            1.5rem;
  --space-lg:            2rem;
  --space-xl:            3rem;
  --space-2xl:           4rem;

}

/* ─── Styles de base globaux ─── */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  background-color: var(--smalt-bg-base);
  color: var(--smalt-text-body);
}

h1, .smalt-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-lh);
  color: var(--smalt-text-primary);
}

h2, .smalt-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-lh);
  color: var(--smalt-text-primary);
}

h3, .smalt-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: var(--smalt-text-primary);
}

p, li, td, th {
  font-family: var(--font-body);
}

a {
  color: var(--smalt-accent-warm);
  text-decoration: none;
}

a:hover {
  color: var(--smalt-text-primary);
}