/*
 * Tokens du design system « Ready Player Web Projets » (direction contrastée), thème clair.
 * Seul fichier à contenir des valeurs de couleur, de taille, de rayon et d'ombre : les autres
 * feuilles passent par ces variables.
 * Les noms désignent un rôle (fond, texte, bordure…) : un thème sombre pourra redéfinir ces
 * variables sans toucher aux composants.
 * Surfaces : la page est sur fond gris (canvas), les contenus dans des panneaux blancs (surface)
 * détachés par une ombre de carte, le kanban sur une bande marine (board).
 * Ratios de contraste (WCAG 2.x) : 4,5:1 minimum pour le texte, 3:1 pour les bordures de
 * contrôle, les formes porteuses de sens et le focus.
 */
:root {
    /* Fonds */
    --canvas: #f4f4f2;          /* fond de page sous l'en-tête blanc : ink 11,1:1, ink-muted 5:1, navy 10,8:1, line-strong 3,3:1 */
    --surface: #ffffff;         /* panneaux, cartes, en-tête du site, champs : ink 12,3:1, ink-muted 5,5:1, navy 11,9:1 */
    --surface-sunken: #f5f7fa;  /* bloc en retrait dans un panneau (zone de message, code) : ink 11,4:1, ink-muted 5,1:1, navy 11:1, line-strong 3,4:1 */
    --surface-hover: #f7f7f5;   /* survol d'une ligne, d'un onglet, d'une carte ; fond d'une carte terminée : ink-done 6,1:1 */

    /* Kanban : bande marine et listes */
    --board: #1a3a52;           /* bande du kanban : on-board 11,9:1, on-board-muted 8:1 ; list dessus 10,6:1 */
    --on-board: #ffffff;        /* titre posé sur board : 11,9:1 ; anneau de focus sur board : 11,9:1 */
    --on-board-muted: #c9d6e2;  /* compteur et aide posés sur board : 8:1 */
    --list: #f1f2f4;            /* liste (colonne) du kanban : ink 10,9:1, ink-muted 4,9:1, ink-done 5,8:1, line-strong 3,2:1 */
    --list-hover: #e2e4e9;      /* survol de « Ajouter une tâche » dans une liste : ink 9,6:1 */
    --list-active: #dfe7ef;     /* bandeau de la liste « En cours » : navy 9,5:1 */
    --list-done: #e9eaed;       /* liste « Terminé », un cran plus foncée : ink-done 5,4:1, ink-muted 4,6:1 */
    --count-pill: #ffffff;      /* pastille du compteur d'une liste : ink gras 12,3:1 */
    --avatar: var(--list-active); /* pastille d'initiales : initiales navy 9,5:1 */

    /* Traits */
    --line: #e9e9e7;            /* séparateur décoratif, jamais seul pour délimiter un contrôle */
    --line-strong: #83878e;     /* bordure de champ, de bouton secondaire, pastille « Non assignée » : 3,6:1 sur surface, 3,3:1 sur canvas, 3,2:1 sur list */

    /* Texte */
    --ink: #37352f;             /* 12,3:1 sur surface, 11,1:1 sur canvas, 11,4:1 sur surface-sunken, 10,9:1 sur list */
    --ink-muted: #6a6965;       /* 5,5:1 sur surface, 5:1 sur canvas, 5,1:1 sur surface-sunken, 4,9:1 sur list et neutral-soft, 5,1:1 sur surface-hover */
    --ink-done: #5f5e5a;        /* titre de la liste « Terminé », titre barré d'une carte terminée : 5,4:1 sur list-done, 6,1:1 sur surface-hover */

    /* Marque et action */
    --navy: #1a3a52;            /* liens, titres, bouton principal, initiales : 11,9:1 sur surface, 10,8:1 sur canvas, 11:1 sur surface-sunken */
    --navy-hover: #10283a;      /* survol : 15,1:1 sur surface */
    --navy-soft: #eef2f6;       /* fond de sélection discret : navy dessus à 10,6:1 */
    --on-navy: #ffffff;         /* texte sur aplat navy : 11,9:1 (15,1:1 sur navy-hover) */
    --orange: #f7941d;          /* un seul point par écran (onglet actif), jamais du texte : 2,3:1 sur surface */
    --focus-ring: var(--navy);  /* anneau de focus : 11,9:1 sur surface, 10,8:1 sur canvas, 10,4:1 sur danger-soft */

    /* États : toujours avec un libellé et une forme */
    --success: #1d5a85;         /* bleu, pas vert : 7,4:1 sur surface, 6,7:1 sur canvas, 6,4:1 sur success-soft */
    --success-soft: #e8f0f7;
    --danger: #b3261e;          /* 6,5:1 sur surface, 5,9:1 sur canvas, 5,7:1 sur danger-soft */
    --danger-soft: #fdeceb;
    --danger-hover: #8f1e18;    /* survol du bouton destructif : on-danger dessus à 8,9:1 */
    --on-danger: #ffffff;       /* texte sur aplat danger : 6,5:1 */
    --warning: #8a4b00;         /* ambre : 6,8:1 sur surface, 6,2:1 sur canvas, 6,1:1 sur warning-soft */
    --warning-soft: #fbf1e3;
    --neutral: #605f5b;         /* 6,6:1 sur surface, 5,8:1 sur canvas, 5,7:1 sur neutral-soft */
    --neutral-soft: #f1f1ef;    /* fond des étiquettes neutres, des messages d'information et des compteurs en pastille */

    /* Formes de statut de tâche : la forme et le libellé portent la différence, pas la teinte */
    --status-todo: var(--ink-muted);  /* cercle vide : 5,5:1 sur surface, 5:1 sur canvas */
    --status-active: var(--navy);     /* demi-cercle, cercle pointé, cercle plein : 11,9:1 sur surface */

    /* Priorité haute : étiquette ambre (6,1:1 sur warning-soft) et filet gauche de la carte (6,8:1 contre le blanc) */
    --priority-high: var(--warning);

    /* Typographie */
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --text-title-1: 600 26px/32px var(--font-sans);      /* titre de page (h1), en navy */
    --text-title-2: 600 18px/26px var(--font-sans);      /* titre de section (h2), en-tête de panneau */
    --text-title-3: 600 14px/20px var(--font-sans);      /* sous-section, titre de bloc */
    --text-body: 400 14px/20px var(--font-sans);         /* texte courant */
    --text-body-client: 400 15px/22px var(--font-sans);  /* texte courant côté client, jamais plus grand */
    --text-board-title: 600 16px/22px var(--font-sans);  /* titre « Tâches » posé sur la bande du kanban */
    --text-card-title: 600 15px/21px var(--font-sans);   /* titre d'une carte de tâche */
    --text-label: 500 13px/18px var(--font-sans);        /* en-tête de colonne, statut de tâche */
    --text-column-title: 700 14px/20px var(--font-sans); /* titre d'une liste du kanban */
    --text-small: 400 13px/18px var(--font-sans);        /* métadonnées, aides, messages */
    --text-caption: 400 12px/16px var(--font-sans);      /* méta des cartes, étiquettes, compteurs */
    --text-tag: 400 11px/16px var(--font-sans);          /* étiquette libre d'une tâche (tag) */
    --text-initials: 700 10px/1 var(--font-sans);        /* initiales d'une pastille */
    --text-button: 500 13px/18px var(--font-sans);       /* libellé de bouton */
    --text-mono: 400 12px/16px var(--font-mono);         /* référence d'un projet, codes */

    /* Espacements */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 10px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 64px;
    --space-tag: 2px;       /* rembourrage vertical d'une étiquette d'état ou de priorité */
    --space-tag-sm: 1px;    /* rembourrage vertical d'une étiquette libre (tag) */
    --space-priority-inline: 7px; /* rembourrage horizontal de l'étiquette « Priorité haute » */

    /* Rayons */
    --radius-sm: 4px;       /* étiquettes, petits éléments, focus */
    --radius-md: 6px;       /* boutons, champs, messages, résumé d'erreurs, menus */
    --radius-lg: 8px;       /* panneaux et cartes de tâche */
    --radius-xl: 10px;      /* listes (colonnes) du kanban */
    --radius-full: 9999px;  /* formes rondes, pastilles d'initiales, compteurs */

    /* Ombres */
    --shadow-card: 0 1px 1px rgb(9 30 66 / 0.25), 0 0 1px rgb(9 30 66 / 0.31);   /* bloc blanc au repos sur fond gris (panneau, carte) */
    --shadow-list: 0 1px 0 rgb(9 30 66 / 0.35);                                   /* liste du kanban sur board : liseré bas */
    --shadow-float: 0 4px 16px rgb(15 15 15 / 0.08), 0 0 0 1px rgb(15 15 15 / 0.05); /* ce qui flotte : menu, message collé, carte glissée */

    /* Traits : épaisseurs et décalages */
    --line-width: 1px;          /* trait de séparation, bordure de champ, de bouton ou d'image */
    --indicator-width: 2px;     /* soulignement de l'onglet actif, anneau du bouton occupé */
    --dash-width: 1.5px;        /* contour en pointillés de la pastille « Non assignée » */
    --focus-width: 2px;         /* anneau de focus, contour pointillé du glisser-déposer */
    --focus-offset: 2px;        /* décalage de l'anneau de focus */
    --focus-offset-inset: 1px;  /* décalage de l'anneau de focus d'un champ, collé à sa bordure */
    --underline-offset: 0.15em; /* soulignement des liens */

    /* Typographie : approche */
    --tracking-code: 0.05em;    /* clé secrète de l'enrôlement, en Space Mono */
    --tracking-initials: 0.02em; /* initiales d'une pastille */

    /* Tailles */
    --control-height: 32px;     /* champs et boutons sur ordinateur */
    --control-height-sm: 28px;  /* boutons compacts (en-tête, cartes) */
    --touch-target: 44px;       /* toute cible sous 640 px de large et sur écran tactile */
    --target-min: 24px;         /* plus petite cible admise (WCAG 2.2), ex. lien d'une liste ou poignée sur ordinateur */
    --choice-input-size: 16px;  /* bouton radio, dans une option de --choice-size dont le libellé est cliquable */
    --shape-size: 14px;         /* forme de statut de tâche, forme d'un message */
    --shape-size-sm: 12px;      /* forme d'une étiquette ou d'une erreur de champ */
    --shape-size-xs: 10px;      /* forme de priorité */
    --handle-dots-width: 10px;  /* zone des six points de la poignée du kanban */
    --handle-dots-height: 12px;
    --handle-dot-radius: 1.2px; /* rayon d'un point de la poignée */
    --handle-dot-fade: 1.6px;   /* bord adouci d'un point de la poignée */
    --handle-dot-step: 5px;     /* pas de la grille des points de la poignée */
    --spinner-size: 0.8em;      /* indicateur d'envoi dans un bouton */
    --avatar-size: 24px;        /* pastille d'initiales */
    --avatar-size-empty: 22px;  /* pastille vide « Non assignée » (contour compris) */
    --count-pill-height: 20px;  /* compteur en pastille */
    --count-pill-min-width: 22px;
    --priority-rule-width: 3px; /* filet gauche d'une carte en priorité haute */
    --menu-width: 11rem;        /* menu « Déplacer… » d'une carte du kanban */
    --menu-item-height: 30px;   /* colonne proposée dans le menu « Déplacer… » (44 px au doigt) */
    --header-height: 52px;
    --container-max: 90rem;
    --form-max: 36rem;
    --narrow-max: 24rem;
    --measure-max: 40rem;       /* longueur de ligne d'une introduction de page ou de section */
    --textarea-min-height: 8rem;
    --qr-code-max: 15rem;       /* code QR de l'enrôlement */
    --table-label-width: 7rem;  /* colonne des libellés d'un tableau empilé sur mobile */
    --task-aside-width: 22rem;  /* colonne de droite de la fiche tâche (statut, détails) */
    --status-select-min: 12rem; /* liste des statuts de la fiche tâche */
    --status-select-max: 20rem;
}

/*
 * Hauteur des contrôles selon le contexte : compacte sur ordinateur, 44 px sous 640 px de large
 * et sur tout écran tactile (tablettes comprises).
 */
:root {
    --control-size: var(--control-height);
    --control-size-sm: var(--control-height-sm);
    --choice-size: var(--control-height-sm);
}

@media (max-width: 640px), (pointer: coarse) {
    :root {
        --control-size: var(--touch-target);
        --control-size-sm: var(--touch-target);
        --choice-size: var(--touch-target);
    }
}