/* Kit UI Oliveras - la source unique des valeurs de toutes les applications de Maison Oliveras.
   Deux couches : les primitives (la teinte) puis les rôles (l'usage). Les composants ne lisent que les rôles, les
   tailles et les espacements. Changer une valeur ici, recopier le kit dans chaque application (python -m
   oliveras_ui.sync) : tous les écrans suivent. Format lu par la page de référence : un jeton par ligne suivi d'un
   commentaire qui dit à quoi il sert ; un groupe commence par "@group <Titre> | <une phrase>".
   Clair seulement : pas de mode sombre (maquette « Pilotage Oliveras v2 »), pas d'ombre. */
:root {
  /* @group Marque | Le noir et le jaune de Maison Oliveras. Le jaune marque (bouton principal, onglet actif) et porte toujours un texte noir. */
  --black: #010101;          /* Noir Oliveras : en-tête, texte, carte héros */
  --yellow: #FFCC00;         /* Jaune Oliveras : bouton principal, onglet actif, logo (texte noir dessus) */
  --yellow-soft: #FFF3BF;    /* Jaune doux : pastille par défaut, ligne du mois en cours, encadré d'action */
  --white: #FFFFFF;          /* Cartes, texte sur le noir */

  /* @group Neutres | Les fonds crème et sable, le taupe des textes discrets. */
  --cream: #F6F4EC;          /* Fond de l'application */
  --sand: #E9E3CF;           /* Autour de l'application sur téléphone, filets des cartes */
  --stone: #D6D2C4;          /* Gris neutre : série de référence d'un graphique, texte discret sur le noir */
  --taupe: #666152;          /* Texte discret */
  --charcoal: #35322A;       /* Filet sur le noir, avatar */
  --khaki: #8C846E;          /* Gris beige : ligne pointillée de l'an dernier sur un graphique */

  /* @group États | Trois tons et l'information : texte, fond, et une teinte claire pour le noir. Un état se lit aussi sans la couleur (un mot). */
  --olive: #56662F;          /* Bon : texte, jauge */
  --olive-soft: #E8EDDB;     /* Bon : fond */
  --olive-light: #A7BA70;    /* Bon : texte sur le noir */
  --amber: #A86412;          /* À surveiller : texte, jauge */
  --amber-soft: #FBEBD3;     /* À surveiller : fond */
  --red: #B3261E;            /* Mauvais : texte, jauge, compteur */
  --red-soft: #FBE4E2;       /* Mauvais : fond */
  --red-light: #F29A92;      /* Mauvais : texte sur le noir */
  --blue: #2F5D8A;           /* Information : texte */
  --blue-soft: #E1EBF5;      /* Information : fond */
  --green: #1C8547;          /* Vert WhatsApp, à peine plus foncé que la maquette (#1F8B4C) pour qu'un texte blanc s'y lise */

  /* @group Rôles | Ce que lisent les composants. Changer un rôle change l'usage partout. */
  --text: var(--black);               /* Texte courant */
  --text-heading: var(--black);       /* Titres */
  --text-muted: var(--taupe);         /* Sous-titres, libellés de chiffre, notes */
  --text-on-dark: var(--white);       /* Texte sur le noir (en-tête, carte héros, notification) */
  --text-on-dark-muted: var(--stone); /* Texte discret sur le noir : date, libellés */
  --text-on-dark-soft: var(--cream);  /* Phrase sur le noir */
  --surface: var(--white);            /* Cartes, tuiles, barre d'onglets du téléphone */
  --surface-page: var(--cream);       /* Fond de l'application, fond d'une jauge, survol d'une ligne */
  --surface-outside: var(--sand);     /* Autour de la colonne de l'application, fond d'une bascule */
  --surface-dark: var(--black);       /* En-tête, carte héros, notification */
  --border: var(--sand);              /* Filet des cartes, des tableaux et des champs */
  --border-strong: var(--black);      /* Carte cliquable survolée, bouton secondaire, puce de filtre */
  --border-on-dark: var(--charcoal);  /* Filet entre deux lignes sur le noir */
  --action: var(--yellow);            /* Bouton principal, onglet actif, puce choisie */
  --action-ink: var(--black);         /* Texte sur le jaune */
  --action-soft: var(--yellow-soft);  /* Pastille par défaut, mois en cours, encadré d'action, gain */
  --link: var(--black);               /* Liens */
  --link-rule: var(--yellow);         /* Trait jaune sous un lien fin */
  --focus: var(--black);              /* Anneau de focus clavier */
  --neutral: var(--stone);            /* Point d'une tâche faite, pastille neutre */
  --avatar: var(--charcoal);          /* Pastille ronde du compte */
  --count: var(--red);                /* Compteur rouge d'un onglet */
  --count-ink: var(--white);          /* Chiffre du compteur */
  --success: var(--olive);            /* Bon ; marge de 38 % et plus */
  --success-bg: var(--olive-soft);    /* Bon : fond */
  --success-on-dark: var(--olive-light); /* Bon : sur le noir */
  --warning: var(--amber);            /* À surveiller ; marge de 30 à 38 % */
  --warning-bg: var(--amber-soft);    /* À surveiller : fond */
  --danger: var(--red);               /* Mauvais ; marge sous 30 % */
  --danger-bg: var(--red-soft);       /* Mauvais : fond */
  --danger-on-dark: var(--red-light); /* Mauvais : sur le noir */
  --danger-ink: var(--white);         /* Texte sur le bouton de suppression */
  --info: var(--blue);                /* Information : texte */
  --info-bg: var(--blue-soft);        /* Information : fond */
  --chart-current: var(--black);      /* Graphique : la période regardée */
  --chart-reference: var(--stone);    /* Graphique : la référence (l'an dernier, l'habitude) */
  --chart-forecast: var(--yellow);    /* Graphique : la prévision, le mois en cours */
  --chart-reference-line: var(--khaki); /* Graphique : la ligne pointillée de la référence, posée sur des barres */
  --choice: var(--black);             /* Choix retenu d'une bascule en pilule, motif de perte retenu */
  --choice-ink: var(--white);         /* Texte du choix retenu */
  --whatsapp: var(--green);           /* Bouton « Ouvrir dans WhatsApp » */
  --whatsapp-ink: var(--white);       /* Texte du bouton WhatsApp */

  /* @group Typographie | Montserrat, avec la police du système en secours. Texte courant 15 px en 500 ; titres en 800. */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Tous les textes */
  --font-mono: ui-monospace, Menlo, Consolas, monospace; /* Codes, identifiants */
  --fs-10: 10px;             /* Axe d'un graphique, chiffre d'un compteur : jamais un texte courant */
  --fs-11: 11px;             /* Libellé en capitales d'un chiffre clé, note sous une carte */
  --fs-12: 12px;             /* Pastilles, sous-titres de chiffre, petits textes */
  --fs-13: 13px;             /* Sous-titre d'écran, lignes d'une liste, bascule */
  --fs-14: 14px;             /* Boutons, tableaux, onglets de l'ordinateur */
  --fs-15: 15px;             /* Texte courant, nom de l'application */
  --fs-16: 16px;             /* Titre de carte ; champs (16 px : le téléphone ne zoome pas) */
  --fs-18: 18px;             /* Petit chiffre clé (une durée, une date) */
  --fs-22: 22px;             /* Chiffre clé d'une tuile */
  --fs-24: 24px;             /* Titre d'écran */
  --fs-26: 26px;             /* Chiffre clé d'une tuile sur ordinateur, salutation */
  --fs-30: 30px;             /* Salutation sur ordinateur */
  --fs-32: 32px;             /* Chiffre de la carte héros */
  --fs-40: 40px;             /* Chiffre de la carte héros sur ordinateur */
  --fw-medium: 500;          /* Texte courant */
  --fw-semibold: 600;        /* Libellés, onglets, lignes */
  --fw-bold: 700;            /* Noms, libellés de chiffre */
  --fw-heavy: 800;           /* Titres, chiffres, bouton principal */
  --lh: 1.5;                 /* Interligne du texte courant */
  --lh-tight: 1.2;           /* Titres et chiffres */
  --ls-caps: .06em;          /* Espacement des libellés en capitales */
  --ls-brand: .16em;         /* Espacement du nom OLIVERAS */

  /* @group Espacements | Les écarts de la maquette, nommés par leur valeur. Aucun padding, gap ni margin hors de cette échelle. */
  --space-2: 2px;            /* Titre et sous-titre collés */
  --space-4: 4px;            /* Entre deux barres, deux onglets */
  --space-6: 6px;            /* Entre deux pastilles, deux lignes serrées */
  --space-8: 8px;            /* Entre deux contrôles, dans une liste */
  --space-10: 10px;          /* Entre deux tuiles, dans une ligne de liste */
  --space-12: 12px;          /* Dans une carte, entre deux colonnes */
  --space-14: 14px;          /* Padding d'une tuile, d'une petite carte */
  --space-16: 16px;          /* Padding d'une carte, marge du téléphone */
  --space-18: 18px;          /* Entre deux blocs d'un écran */
  --space-24: 24px;          /* Padding de la carte héros sur ordinateur */
  --space-28: 28px;          /* Haut de l'écran sur ordinateur, bas de l'écran du téléphone */
  --space-32: 32px;          /* Marge de l'ordinateur */
  --space-48: 48px;          /* Bas de l'écran sur ordinateur */

  /* @group Formes | Les arrondis de la maquette, les hauteurs au doigt (44 px au moins) et les largeurs de l'écran. */
  --radius-bar: 4px;         /* Jauge, haut d'une barre de graphique */
  --radius-tag: 5px;         /* Étiquette, écart chiffré */
  --radius-logo: 8px;        /* Pastille jaune du logo, gain */
  --radius-field: 9px;       /* Champs */
  --radius-control: 10px;    /* Boutons, bascule, messages, notification */
  --radius-segment: 7px;     /* Choix d'une bascule */
  --radius-card-sm: 12px;    /* Petite carte, tuile de chiffre */
  --radius-card: 14px;       /* Carte */
  --radius-hero: 16px;       /* Carte héros */
  --radius-full: 999px;      /* Pastilles, puces, onglets, avatar */
  --control-h: 44px;         /* Hauteur minimale d'un bouton : une cible au doigt */
  --control-h-sm: 36px;      /* Petit bouton, champ d'une barre de filtres */
  --tab-h: 48px;             /* Onglet de la barre du téléphone */
  --logo-box: 34px;          /* Pastille jaune du logo */
  --logo-img: 28px;          /* Logo dans sa pastille */
  --avatar-size: 28px;       /* Pastille ronde du compte, case d'une tâche */
  --count-size: 16px;        /* Compteur rouge d'un onglet */
  --gauge-h: 8px;            /* Jauge */
  --gauge-h-thin: 6px;       /* Jauge fine */
  --dot-size: 10px;          /* Point d'une ligne de liste */
  --legend-size: 8px;        /* Carré d'une légende */
  --list-col: 72px;          /* Colonne de chiffres d'une liste à trois colonnes (ventes, marge) */
  --chart-h: 140px;          /* Graphique en barres sur téléphone */
  --chart-h-lg: 220px;       /* Graphique en barres sur ordinateur */
  --chart-h-sm: 80px;        /* Petit graphique (six mois d'un client) */
  --shell-w: 440px;          /* Colonne de l'application sur téléphone et tablette */
  --page-w: 1120px;          /* Largeur maximale d'un écran sur ordinateur */
  --narrow-w: 560px;         /* Écran étroit (une commande, un formulaire seul) */
  --toast-w: 400px;          /* Largeur maximale d'une notification */
  --toast-bottom: 92px;      /* Notification au-dessus de la barre d'onglets du téléphone */
  --card-min-w: 280px;       /* Largeur minimale d'une carte de .card-grid */
  --modal-w: 560px;          /* Fenêtre de saisie */
  --modal-w-wide: 960px;     /* Fenêtre large : une fiche complète, un tableau */
  --filter-w: 180px;         /* Liste d'une barre de filtres */
  --filter-w-wide: 280px;    /* Liste d'une barre de filtres aux valeurs longues (.filter-wide) */
  --search-w: 320px;         /* Recherche d'une barre de filtres */
  --menu-w: 200px;           /* Menu déroulant, menu d'une colonne de grille : largeur minimale */
  --menu-w-max: 320px;       /* Menu d'une colonne de grille et choix des colonnes : largeur maximale */
  --menu-list-h: 260px;      /* Liste de valeurs d'un menu de colonne : elle défile au-delà */
  --grid-icon: 24px;         /* Icône du titre d'une colonne de grille (tri, filtre) : 24 px au moins, au doigt aussi */
  --grid-resize-w: 8px;      /* Poignée qui élargit une colonne de grille */
  --grid-col-min-w: 56px;    /* Largeur minimale d'une colonne de grille qu'on rétrécit */
  --grid-col-fit-min: 72px;  /* Largeur minimale d'une colonne ajustée à son contenu */
  --grid-autosize-max: 360px; /* Largeur maximale d'une colonne ajustée à son contenu */
  --grid-chip-h: 28px;       /* Pastille d'un filtre actif de la grille */
  --grid-chevron: 22px;      /* Chevron d'un groupe qui se déplie, bouton × d'une pastille */
  --grid-colmenu-w: 220px;   /* Menu ⋮ d'une colonne de grille */
  --grid-filter-w: 260px;    /* Panneau du filtre d'une colonne de grille */

  /* @group Profondeur | Pas d'ombre : une surface se détache par son filet. Seul un voile passe derrière une fenêtre. */
  --overlay: rgba(1, 1, 1, .4); /* Voile derrière une fenêtre */

  /* @group Maquette | Noms du prototype Astro, gardés pour recopier ses écrans. L'audit les signale en avertissement : à remplacer. */
  --ink: var(--black);                /* maquette : --text (texte) ou --surface-dark (fond) */
  --app: var(--cream);                /* maquette : --surface-page */
  --hors: var(--sand);                /* maquette : --surface-outside */
  --line: var(--sand);                /* maquette : --border */
  --muted: var(--taupe);              /* maquette : --text-muted */
  --sur-noir: var(--stone);           /* maquette : --text-on-dark-muted */
  --sur-noir-2: var(--cream);         /* maquette : --text-on-dark-soft */
  --sep-noir: var(--charcoal);        /* maquette : --border-on-dark */
  --brand: var(--yellow);             /* maquette : --action */
  --brand-soft: var(--yellow-soft);   /* maquette : --action-soft */
  --ok: var(--olive);                 /* maquette : --success */
  --ok-soft: var(--olive-soft);       /* maquette : --success-bg */
  --ok-noir: var(--olive-light);      /* maquette : --success-on-dark */
  --warn: var(--amber);               /* maquette : --warning */
  --warn-soft: var(--amber-soft);     /* maquette : --warning-bg */
  --bad: var(--red);                  /* maquette : --danger */
  --bad-soft: var(--red-soft);        /* maquette : --danger-bg */
  --neutre: var(--stone);             /* maquette : --neutral */
  --n1: var(--stone);                 /* maquette : --chart-reference */
  --n1-ink: var(--khaki);             /* maquette : --chart-reference-line */

  color-scheme: light;
}