/* ============================================================
   May'Kilos — site vitrine · jetons

   Repris de app/css/tokens.css : le site et l'application doivent se
   ressembler, c'est la même marque. Deux écarts assumés, et un seul
   d'entre eux est un choix esthétique.

   1. L'encre menthe vaut #0A6B5C, pas #0E8E7A comme la maquette.
      La valeur d'origine plafonne à 3,66 de contraste sur le fond
      menthe, quand le seuil AA en demande 4,50 — pour tout texte sous
      18,66 px, gras compris. La correction a été faite dans
      l'application ; elle vaut ici aussi.

   2. Le thème sombre reprend les valeurs de la maquette du site
      (#12162E, #8E9AF0), légèrement différentes de celles de
      l'application (#131735, #A9B4FF). Le site est une vitrine, il
      assume un contraste un peu plus profond.
   ============================================================ */

:root {
  color-scheme: light;

  /* Marque */
  --mk-primary: #2E3A8C;
  --mk-primary-surface: #2E3A8C;
  --mk-action: #1FC8A9;
  --mk-action-pressed: #17AC92;
  --mk-accent: #FF7A59;

  /* Surfaces */
  --mk-bg: #F8F6F2;
  --mk-card: #FFFFFF;
  --mk-mint: #E4F7F3;
  --mk-avatar: #DCD5C9;

  /* Encres */
  --mk-text: #1A1D2E;
  --mk-text-2: #5A5F73;
  --mk-mint-text: #0A6B5C;      /* 5,78 sur fond menthe */
  --mk-on-action: #06231F;      /* 7,80 sur la menthe — jamais de blanc */
  --mk-on-dark: #FFFFFF;
  /* Le corail sert d'accent, mais jamais d'encre : #FF7A59 ne donne que 2,26
     sur blanc. L'encre corail est bien plus sombre — 7,91. Le trait, lui,
     reste le corail vif : une bordure n'est pas du texte. */
  --mk-accent-text: #8E3418;
  --mk-sceau-avion: #0A6B5C;    /* l'avion du sceau, sur fond clair — 5,71 */
  /* Encre POSÉE SUR le corail, à ne pas confondre avec l'encre corail :
     du blanc sur #FF7A59 ne donne que 2,57, et une pastille de compteur
     porte un chiffre — c'est de l'information, pas de la décoration. */
  --mk-sur-accent: #3D1004;     /* 6,42 sur le corail clair */
  --mk-avatar-text: #2E3A8C;    /* 6,86 sur le sable ; du blanc n'y ferait que 1,46 */
  --mk-star: #B37400;           /* étoiles pleines, décoratives : la note est écrite à côté */
  --mk-star-vide: #D8D3C8;
  --mk-refus-bg: #FDECED;
  --mk-refus-text: #C0322F;     /* 4,92 sur son fond */
  --mk-piste: #EDEAE3;          /* piste d'une barre de progression, décorative */

  /* Traits et ombres — teintées de la couleur qu'elles portent */
  --mk-hairline: rgba(46, 58, 140, .10);
  --mk-hairline-soft: rgba(46, 58, 140, .08);
  --mk-shadow-card: 0 10px 30px rgba(46, 58, 140, .14);
  --mk-shadow-raised: 0 18px 44px rgba(46, 58, 140, .16);
  --mk-shadow-photo: 0 20px 50px rgba(46, 58, 140, .16);
  --mk-shadow-cta: 0 10px 24px rgba(31, 200, 169, .35);

  /* Formes */
  --mk-coche: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path d='M1.2 5.2 4.5 8.5 10.8 1.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --mk-croix: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M1.5 1.5 9.5 9.5M9.5 1.5 1.5 9.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
  /* Le trait d'une case à cocher vide doit se voir : le filet ordinaire, à
     10 % d'opacité, disparaît sur une carte blanche. */
  --mk-hairline-fort: rgba(46, 58, 140, .28);
  --mk-r-card: 20px;
  --mk-r-pill: 999px;
  --mk-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme — grille de 4 */
  --mk-gouttiere: 64px;
  --mk-largeur: 1312px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --mk-sceau-avion: #1FC8A9;     /* sur fond sombre, la menthe vive reprend sa place */
  --mk-primary: #8E9AF0;         /* éclairci : l'indigo est illisible sur fond sombre */
  --mk-primary-surface: #2C3157; /* mais la SURFACE indigo reste sombre */
  --mk-action: #1FC8A9;
  --mk-action-pressed: #17AC92;
  --mk-accent: #E0705C;

  --mk-bg: #12162E;
  --mk-card: #1E2347;
  --mk-mint: rgba(31, 200, 169, .14);
  --mk-avatar: #343A6B;

  --mk-text: #EDEBF7;
  --mk-text-2: #A6A9BF;
  --mk-mint-text: #5CD3C1;
  --mk-on-action: #06231F;
  --mk-on-dark: #FFFFFF;
  --mk-accent-text: #FFB0A0;    /* 8,63 sur carte */
  --mk-sur-accent: #2B0A02;     /* 5,79 sur le corail sombre */
  --mk-avatar-text: #FFFFFF;    /* le fond d'avatar est sombre ici : 10,69 */
  --mk-star: #F5C46B;
  --mk-star-vide: #3A3F63;
  --mk-refus-bg: #3A2230;
  --mk-refus-text: #FF9A9C;     /* 6,15 */
  --mk-piste: #2C3157;
  --mk-hairline-fort: rgba(237, 235, 247, .32);

  --mk-hairline: #2C3157;
  --mk-hairline-soft: #2C3157;
  /* En sombre, la séparation se fait par bordure, pas par ombre. */
  --mk-shadow-card: none;
  --mk-shadow-raised: none;
  --mk-shadow-photo: none;
  --mk-shadow-cta: none;
}

/* Le visiteur qui n'a rien réglé suit son système. Le sélecteur du site
   pose ensuite data-theme, qui l'emporte dans les deux sens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mk-sceau-avion: #1FC8A9;
    --mk-primary: #8E9AF0;
    --mk-primary-surface: #2C3157;
    --mk-accent: #E0705C;
    --mk-bg: #12162E;
    --mk-card: #1E2347;
    --mk-mint: rgba(31, 200, 169, .14);
    --mk-avatar: #343A6B;
    --mk-text: #EDEBF7;
    --mk-text-2: #A6A9BF;
    --mk-mint-text: #5CD3C1;
    --mk-accent-text: #FFB0A0;
    --mk-sur-accent: #2B0A02;
    --mk-avatar-text: #FFFFFF;
    --mk-star: #F5C46B;
    --mk-star-vide: #3A3F63;
    --mk-refus-bg: #3A2230;
    --mk-refus-text: #FF9A9C;
    --mk-piste: #2C3157;
    --mk-hairline-fort: rgba(237, 235, 247, .32);
    --mk-hairline: #2C3157;
    --mk-hairline-soft: #2C3157;
    --mk-shadow-card: none;
    --mk-shadow-raised: none;
    --mk-shadow-photo: none;
    --mk-shadow-cta: none;
  }
}