/*
  Design tokens — Laboratoire Ledarath
  Source : ANALYSE.md §1 (structure reprise de Digital Smile Maker)
           et §2 (palette Ledarath, validée par le client).
  Rien ici n'est copié des couleurs/contenus de DSM : uniquement l'échelle et les proportions.
*/

:root {
  /* ---------- Couleurs de marque ---------- */
  --color-primary: #0B4C8C;
  --color-primary-dark: #073A6B;
  --color-primary-light: #E7EFF7;
  --color-accent: #3D7A8C;

  /* ---------- Fonds ---------- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F8FA;
  --color-bg-dark: #0B2036;

  /* ---------- Texte ---------- */
  --color-text: #1A2530;
  --color-text-muted: #5B6572;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #C7D3DE;

  /* ---------- Bordures ---------- */
  --color-border: #DCE3EA;
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---------- États ---------- */
  --color-success: #1E7B4D;
  --color-error: #B3261E;

  /* ---------- Typographie ---------- */
  --font-family-base: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-heading: 1.3;
  --line-height-body: 1.5;

  /* Échelle desktop (>= 920px) */
  --font-size-h1: 4rem;      /* 64px */
  --font-size-h2: 3.5rem;    /* 56px */
  --font-size-h3: 3rem;      /* 48px */
  --font-size-h4: 2.5rem;    /* 40px */
  --font-size-h5: 1.625rem;  /* 26px */
  --font-size-h6: 1.125rem;  /* 18px */
  --font-size-body-lg: 1.125rem; /* 18px */
  --font-size-body: 1rem;        /* 16px */
  --font-size-body-sm: 0.875rem; /* 14px, surtitres uppercase */

  /* ---------- Espacements ---------- */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 5rem;     /* 80px */

  /* ---------- Grille ---------- */
  --container-width: 1240px;
  --container-padding: 1.5rem; /* 24px, marge latérale mobile */

  /* ---------- Rayons ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 3px rgba(11, 32, 54, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 32, 54, 0.10);
  --shadow-lg: 0 12px 32px rgba(11, 32, 54, 0.14);

  /* ---------- Boutons (géométrie DSM) ---------- */
  --button-padding-x: 2.5rem;   /* 40px desktop */
  --button-padding-y: 1rem;     /* 16px desktop */
  --button-padding-x-mobile: 2.25rem; /* 36px */
  --button-padding-y-mobile: 0.875rem; /* 14px */
  --button-radius: var(--radius-pill);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.2s ease;

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Échelle mobile (< 920px) — voir ANALYSE.md §1 */
@media (max-width: 919px) {
  :root {
    --font-size-h1: 2.5rem;    /* 40px */
    --font-size-h2: 2.25rem;   /* 36px */
    --font-size-h3: 2rem;      /* 32px */
    --font-size-h4: 1.5rem;    /* 24px */
    --font-size-h5: 1.25rem;   /* 20px */
    --font-size-h6: 1.125rem;  /* 18px */
    --button-padding-x: var(--button-padding-x-mobile);
    --button-padding-y: var(--button-padding-y-mobile);
  }
}