/* =====================================================================
   tokens.css : jetons de design de la suite FullMoon (Clautel, Caisse, Carnet)

   Style repris du design de référence choisi par le gérant (docs/design/) :
   double bleu, fond blanc, grille de 8 px, rayon de 8 px, presque aucune ombre.
   Seul le style est repris : aucun logo, aucun nom, aucun visuel de marque.
   Règles et adaptations : docs/design/systeme-design.md.

   Police à charger dans la page (poids utiles seulement) :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700&display=swap" rel="stylesheet">

   Règle d'or : les composants n'utilisent que ces variables, jamais une
   couleur, une taille de texte ou un espacement en dur. Un mode sombre se
   fera en redéfinissant les jetons listés à la fin du fichier.
   ===================================================================== */

:root {
  /* ---------- 1. Couleur du site (identité) ----------
     --brand : couleur du site sélectionné (ligne 1 de la barre, logo, écran de
     verrouillage), et nulle part ailleurs. La coquille la remplace en JS par
     sites.logo_color et calcule --brand-ink (noir ou blanc, celui qui contraste
     le plus). Valeur par défaut : bleu marine, sans site choisi, pour « Tous les
     sites » et pour les Paramètres communs. */
  --brand: #002d72;
  --brand-ink: #ffffff;                       /* texte et icônes posés sur --brand */
  --brand-hover: color-mix(in srgb, var(--brand-ink) 12%, var(--brand));   /* appui sur la barre */
  --brand-selected: color-mix(in srgb, var(--brand-ink) 18%, var(--brand)); /* côté actif */
  --brand-line: color-mix(in srgb, var(--brand-ink) 35%, var(--brand));     /* traits verticaux */

  /* Couleurs de site proposées (à enregistrer dans sites.logo_color) */
  --site-default: #002d72;  /* bleu marine : aucun site, « Tous les sites » ; texte blanc 12,98:1 */
  --site-auberge: #1d5c4d;  /* Auberge de la Source, vert source ; texte blanc 7,81:1 */
  --site-plage: #c49a5c;    /* La Plage, sable ; texte noir #14181f 6,88:1 */

  /* ---------- 2. Couleur d'action (une seule, quel que soit le site) ----------
     Cerulean = « on peut toucher » : liens, boutons, onglet actif, focus. */
  --link: #056dae;            /* 5,52:1 sur blanc */
  --link-hover: #002256;      /* survol et appui, 15,41:1 */
  --link-ink: #ffffff;        /* texte sur un fond --link */
  --link-tint: #e8f1f8;       /* survol d'une ligne, puce cochée ; --link dessus 4,83:1, --link-hover 13,47:1 */

  /* ---------- 3. Texte ---------- */
  --ink: #333333;             /* texte courant, 12,63:1 */
  --ink-subtle: #555555;      /* texte secondaire appuyé, 7,46:1 */
  --ink-muted: #666666;       /* légendes, aides, 5,74:1 (5,22:1 sur --surface-1) */
  --ink-placeholder: #6b6b6b; /* texte indicatif d'un champ, 5,33:1 */
  --ink-inverse: #ffffff;     /* texte sur fond foncé (messages flash) */
  --ink-strong: #14181f;      /* noir choisi pour --brand-ink sur un site clair */

  /* ---------- 4. Surfaces ---------- */
  --canvas: #ffffff;          /* fond de page et des cartes */
  --surface-1: #f4f4f4;       /* bandes, en-têtes de tableau, valeurs en lecture seule */
  --surface-2: #ececec;       /* éléments désactivés */
  --surface-dark: #333333;    /* message flash (toast) */
  --today-bg: #f2f6f9;        /* colonne du jour (saturation < 3 %, non cliquable) */
  --weekend-bg: #fafafa;      /* samedi et dimanche dans le calendrier */
  --backdrop: rgba(0, 0, 0, 0.42); /* voile derrière une fenêtre */

  /* ---------- 5. Traits ---------- */
  --hairline: #dddddd;        /* séparateurs, bord des cartes, piste de progression (décoratif) */
  --hairline-strong: #888888; /* bord des champs, 3,54:1 (seuil 3:1 des composants) */

  /* ---------- 6. Messages (sémantique) ---------- */
  --danger: #d60000;          /* erreur, écart rouge, bords et icônes ; 5,44:1 sur blanc */
  --danger-hover: #a80000;
  --danger-ink: #a80000;      /* texte rouge posé sur --danger-bg, 6,90:1 (7,88:1 sur blanc) */
  --danger-bg: #fdecec;
  --on-danger: #ffffff;       /* texte sur un fond --danger (bouton, compteur), 5,44:1 */
  --success: #006e0a;         /* validé, écart vert ; 6,49:1 */
  --success-bg: #e8f3e9;      /* --success dessus : 5,70:1 */
  --warning: #b25e00;         /* ambre foncé : icônes, bords ; 4,67:1 */
  --warning-ink: #7a4100;     /* texte d'avertissement, 7,46:1 sur --warning-bg */
  --warning-bg: #fff4e0;
  --info: #4a5361;            /* information neutre, ardoise (jamais bleue : le bleu veut dire « action ») ; 7,77:1 */
  --info-bg: #f0f1f3;         /* --info dessus : 6,88:1 */
  --disabled-ink: #6b6b6b;    /* 4,51:1 sur --surface-2 */

  /* ---------- 7. Écart de caisse ---------- */
  --ecart-ok: var(--success);           /* |écart| ≤ tolérance (1 €) */
  --ecart-ok-bg: var(--success-bg);
  --ecart-attention: var(--warning-ink);/* ≤ seuil d'alerte (10 €) */
  --ecart-attention-bg: var(--warning-bg);
  --ecart-alerte: var(--danger-ink);    /* au-delà : commentaire obligatoire (texte foncé, AA sur fond rose) */
  --ecart-alerte-bg: var(--danger-bg);

  /* ---------- 8. États de réservation (pastilles : fond pâle + texte foncé) ---------- */
  --resa-confirmee-fg: #33507a;  --resa-confirmee-bg: #edf2f8;  /* à venir, 7,26:1 (pastille avec un point, non cliquable) */
  --resa-arrivee-fg:   #0f5b2e;  --resa-arrivee-bg:   #e6f4ea;  /* en séjour, 7,23:1 */
  --resa-partie-fg:    #555555;  --resa-partie-bg:    #efefef;  /* 6,48:1 */
  --resa-annulee-fg:   #8f1d1d;  --resa-annulee-bg:   #f9ecec;  /* 7,72:1 */
  --resa-noshow-fg:    #7a3e00;  --resa-noshow-bg:    #fdf0dc;  /* 7,42:1 */
  --resa-demande-fg:   #5b3f8c;  --resa-demande-bg:   #f1ecf8;  /* option / demande, 7,14:1 */

  /* Barres du calendrier : la couleur dit ce qu'il y a à faire (logique Mews, cahier §4.3).
     Seules surfaces pleines colorées sous la barre du haut : exception voulue. */
  --bar-action-bg: var(--link);   --bar-action-fg: var(--link-ink); /* arrivée ou départ du jour à faire, 5,52:1 */
  --bar-retard-bg: #a35200;       --bar-retard-fg: #ffffff;  /* en retard, no-show probable, 5,58:1 */
  --bar-present-bg: #4b5563;      --bar-present-fg: #ffffff; /* client présent, 7,56:1 */
  --bar-calme-bg: #e9ecef;        --bar-calme-fg: #333333;   /* séjour passé ou futur, 10,65:1 */
  --bar-calme-border: #c4c9cf;
  --bar-demande-bg: #ffffff;      --bar-demande-border: #6b7280; /* pointillés, 4,83:1 */
  --bar-blocage-a: #e4e4e4;       --bar-blocage-b: #f7f7f7;  /* hachures, texte --ink-subtle */
  --bar-annulee-bg: var(--resa-annulee-bg); --bar-annulee-fg: var(--resa-annulee-fg);
  --bar-annulee-border: #ead0d0;

  /* ---------- 9. États de ménage ---------- */
  --menage-afaire-fg:   #9b2c2c;  --menage-afaire-bg:   #fbeaea;  /* 6,47:1 */
  --menage-encours-fg:  #7a3e00;  --menage-encours-bg:  #fdf0dc;  /* 7,42:1 */
  --menage-propre-fg:   #0f5b2e;  --menage-propre-bg:   #e6f4ea;  /* 7,23:1 */
  --menage-controlee-fg:#0b5560;  --menage-controlee-bg:#e3f3f4;  /* 7,41:1 */
  --menage-hs-fg:       #3d3d3d;  --menage-hs-bg:       #e4e4e4;  /* hors service, 8,54:1 */

  /* ---------- 10. Canaux (petite pastille ronde avec une lettre) ----------
     --canal-*-tint : fond pâle d'une barre en mode « couleur par canal »
     (Réglages), texte --ink dessus (≥ 10,7:1), bord gauche de 4 px --canal-*-bg. */
  --canal-direct-bg:  #3f4a5a;  --canal-direct-fg:  #ffffff;  --canal-direct-tint:  #eceef1;  /* D, 8,98:1 */
  --canal-booking-bg: #1f3f86;  --canal-booking-fg: #ffffff;  --canal-booking-tint: #e9edf6;  /* B, 9,94:1 */
  --canal-expedia-bg: #fbd36b;  --canal-expedia-fg: #1b2a4a;  --canal-expedia-tint: #fef6dd;  /* E, 9,91:1 */
  --canal-airbnb-bg:  #c2364a;  --canal-airbnb-fg:  #ffffff;  --canal-airbnb-tint:  #f9e9ec;  /* A, 5,36:1 */

  /* ---------- 11. Typographie ----------
     Échelle : 32 / 20 / 16 / 14 / 12 px, plus 22 et 28 px pour les montants.
     Aucun texte sous 12 px. */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num-tabular: tabular-nums;  /* chiffres de même largeur : montants alignés */
  --fw-light: 300;     /* uniquement paragraphe d'introduction ≥ 16 px sur blanc */
  --fw-regular: 400;
  --fw-semibold: 600;  /* boutons, onglet actif, montants, pastilles, titres de bloc, capitales,
                          en-têtes de tableau, barres du calendrier */
  --fw-bold: 700;      /* titres d'écran et de section, libellés de champ */

  /* Rôles : taille / interligne / graisse (/ espacement) */
  --display-size: 32px;     --display-lh: 40px;     --display-weight: 700;   /* titre d'écran (« La Plage · jeudi 8 octobre ») */
  --heading-size: 20px;     --heading-lh: 28px;     --heading-weight: 700;   /* titre de section, de fenêtre, de jour */
  --heading-md-size: 16px;  --heading-md-lh: 24px;  --heading-md-weight: 600;/* titre de bloc (Comptage), en-tête de groupe */
  --body-lg-size: 16px;     --body-lg-lh: 24px;     --body-lg-weight: 400;   /* texte des champs, paragraphe */
  --body-lg-light-weight: 300;                                                /* paragraphe d'introduction seulement */
  --body-md-size: 14px;     --body-md-lh: 21px;     --body-md-weight: 400;   /* texte courant, tableaux (300 → 400) */
  --body-sm-size: 12px;     --body-sm-lh: 18px;     --body-sm-weight: 400;   /* petit texte (300 → 400) */
  --label-size: 14px;       --label-lh: 20px;       --label-weight: 700;     /* libellé de champ */
  --label-sm-size: 12px;    --label-sm-lh: 16px;    --label-sm-weight: 600;  /* pastilles, lettres de canal (400 → 600) */
  --caps-size: 12px;        --caps-lh: 16px;        --caps-weight: 600;      /* titres en capitales */
  --caps-tracking: 1.5px;
  --button-size: 16px;      --button-lh: 24px;      --button-weight: 600;
  --nav-size: 16px;         --nav-lh: 24px;         --nav-weight: 400;       /* onglets, côtés de la barre */
  --nav-active-weight: 600;
  --caption-size: 12px;     --caption-lh: 18px;     --caption-weight: 400;
  --amount-size: 22px;      --amount-lh: 28px;      --amount-weight: 600;    /* saisie d'un montant, CA du mois */
  --amount-lg-size: 28px;   --amount-lg-lh: 34px;   --amount-lg-weight: 700; /* écart, chiffres du pavé PIN */

  /* ---------- 12. Espacements (base 8 px) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --gutter: 24px;             /* marge latérale de page (16 px sur téléphone) */
  --container-max: 1280px;

  /* ---------- 13. Rayons ---------- */
  --radius-none: 0;
  --radius-sm: 4px;           /* pastilles de statut (non cliquables) */
  --radius-md: 8px;           /* défaut et minimum de tout ce qui se touche : boutons, champs, cartes, menus */
  --radius-lg: 16px;          /* grands panneaux (écran de verrouillage) */
  --radius-pill: 999px;       /* pastilles rondes, logo */

  /* ---------- 14. Ombres (quasi nulles : on sépare par un trait) ---------- */
  --shadow-none: none;
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.075);   /* survol d'une carte cliquable */
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.12);    /* menu déroulant */
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.18);/* fenêtre (popup) seulement */

  /* ---------- 15. Focus (sur cerulean, pas sur la couleur du site) ---------- */
  --focus-color: var(--link);
  --focus-outline: 2px solid var(--focus-color);
  --focus-offset: 2px;
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--focus-color) 25%, transparent);  /* halo, suit --link */
  --focus-outline-on-brand: 2px solid var(--brand-ink); /* seulement sur ce qui est posé sur --brand */

  /* ---------- 16. Hauteurs ---------- */
  --h-touch-min: 44px;        /* toute cible tactile */
  --h-button: 46px;
  --h-button-sm: 44px;        /* bouton compact (barres d'outils, tableaux) : même typographie */
  --h-button-lg: 56px;        /* gros bouton au doigt (tuile Ménage) */
  --h-field: 52px;
  --h-field-sm: 44px;         /* champ compact (filtres, recherche, date) : même typographie */
  --h-field-cash: 56px;       /* montant de caisse sur tablette */
  --h-row: 52px;              /* ligne de tableau confortable */
  --h-row-dense: 44px;        /* ligne de tableau dense */
  --h-topbar-1: 56px;         /* ligne 1 : site, côtés, liens, personne */
  --h-topbar-2: 48px;         /* ligne 2 : onglets du côté actif */
  --h-actionbar: 64px;        /* barre d'action collante en bas (Clôture) */
  --h-keypad-key: 72px;       /* touche du pavé PIN */

  /* ---------- 17. Superposition (z-index) ---------- */
  --z-base: 0;
  --z-sticky: 10;             /* colonnes et en-têtes collants, barre d'action */
  --z-topbar: 100;
  --z-menu: 200;
  --z-backdrop: 300;
  --z-dialog: 310;
  --z-toast: 400;
  --z-lock: 500;              /* écran de verrouillage, au-dessus de tout */

  /* ---------- 18. Transitions ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Tablette et petit ordinateur : titre d'écran un peu plus court (28 px),
   pour garder la saisie de la Clôture sur un seul écran à 1024 × 768 */
@media (max-width: 1279px) {
  :root {
    --display-size: 28px;
    --display-lh: 36px;
  }
}

/* Téléphone : titres plus courts, marges réduites */
@media (max-width: 599px) {
  :root {
    --display-size: 24px;
    --display-lh: 30px;
    --heading-size: 18px;
    --heading-lh: 26px;
    --gutter: 16px;
  }
}

/* Mouvement réduit : pas d'animation */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* Mode sombre (non livré, le design d'origine n'en a pas).
   Pour l'ajouter, redéfinir seulement ces familles de jetons :
   :root[data-theme="dark"] {
     --canvas, --surface-1, --surface-2, --surface-dark, --today-bg, --weekend-bg, --backdrop ;
     --ink, --ink-subtle, --ink-muted, --ink-placeholder, --ink-inverse ;
     --hairline, --hairline-strong ;
     --link (éclaircir), --link-hover, --link-tint ;
     --danger-ink, --info, --*-bg des messages, des réservations, du ménage ;
     --bar-calme-*, --bar-demande-*, --bar-blocage-*, --bar-annulee-border, --canal-*-tint ;
   }
   --brand et --brand-ink restent calculés par la coquille ; --on-danger,
   --link-ink et les textes des barres pleines restent blancs. */