/*
 * LocalScreenshot : jetons de design. UNE valeur par jeton, en clair et en sombre.
 * Référence unique pour coder l'application ; extraite des six canevas le 2026-10-08,
 * écarts arbitrés dans design/system/README.md. Direction « Signal ».
 *
 * Usage : :root porte le thème clair ; .ls-root (components.css) pose la base typographique et ne porte
 * AUCUN jeton, sinon elle remettrait le clair à l'intérieur d'un thème sombre.
 * Sombre : [data-theme="dark"] ou .ls-dark. Panneau inversé dans une page claire : .ls-invert.
 * Page claire forcée dans un thème sombre (cadre de capture, aperçu) : .ls-light.
 */

:root,
.ls-light {
    /* ---- couleurs : fonds et surfaces ---- */
    --ls-ground: #fbfbf9;      /* fond de page */
    --ls-surface: #ffffff;     /* cartes, champs, menus */
    --ls-sunk: #f4f4f0;        /* zones en retrait : barres de fenêtre, onglet actif, scène d'une capture */

    /* ---- couleurs : encre et texte (contraste mesuré sur ground / surface / sunk) ---- */
    --ls-ink: #0d0e0c;         /* titres, texte fort        18,7 / 19,4 / 17,5 */
    --ls-body: #3c3e38;        /* texte courant             10,5 / 10,8 / 9,8 */
    --ls-muted: #6a6c64;       /* texte secondaire          5,1 / 5,3 / 4,8 */
    --ls-faint: #6e7068;       /* indices, étapes à venir   4,8 / 5,0 / 4,6 : plancher pour du texte */

    /* ---- couleurs : filets ---- */
    --ls-line: #e6e6e0;        /* séparateurs internes */
    --ls-line-strong: #d9d9d2; /* bords de cartes, de champs, de boutons */

    /* ---- couleurs : citron « signal » et ses états ---- */
    --ls-signal: #c4f33a;
    --ls-signal-hover: #b5e62a;
    --ls-signal-active: #a8d91f;
    --ls-on-signal: #0d0e0c;                       /* 15,0:1 sur le citron */
    --ls-signal-edge: rgba(13, 14, 12, 0.14);      /* liseré intérieur : le citron ne flotte jamais sans bord */
    --ls-signal-ring: color-mix(in srgb, var(--ls-signal) 50%, transparent); /* halo de sélection */
    --ls-signal-wash: color-mix(in srgb, var(--ls-signal) 22%, var(--ls-surface));

    /* ---- couleurs : action principale (noire en clair, citron en sombre) ---- */
    --ls-cta: #0d0e0c;
    --ls-cta-hover: #2a2c27;
    --ls-on-cta: #ffffff;

    /* ---- couleurs : états ---- */
    --ls-ok: #3d5700;          /* texte de succès            7,6:1 sur ok-bg */
    --ls-ok-bg: #f0fbd0;
    --ls-warn: #b4530a;        /* texte d'alerte             4,6:1 sur warn-bg */
    --ls-warn-bg: #fdf3e4;
    --ls-bad: #b3261e;         /* texte d'erreur             5,7:1 sur bad-bg, 6,5:1 sur surface */
    --ls-bad-bg: #fbeceb;
    --ls-veil: rgba(13, 14, 12, 0.42); /* voile sous une fenêtre modale */

    /* ---- couleurs fixes : pièces qui ne changent pas avec le thème (avatar d'assistant, pastille d'état, écran d'un appareil, page dans un cadre de navigateur) ---- */
    --ls-fixed-ink: #0d0e0c;
    --ls-fixed-paper: #ffffff;
    --ls-fixed-chrome: #f4f4f0;
    --ls-fixed-chrome-line: #d9d9d2;
    --ls-fixed-chrome-text: #6a6c64;
    --ls-fixed-signal: #c4f33a;
    --ls-fixed-bezel: #111210;
    --ls-fixed-on-ink: #f1f2ec;        /* texte sur une pièce noire fixe (pastille d'état, code sombre) */
    --ls-fixed-on-ink-muted: #9a9c93;
    --ls-fixed-skeleton: #efefea;

    /* ---- couleurs d'illustration : pages dessinées en miniature (jamais une vraie capture) et planche du logo.
       Elles ne servent JAMAIS à du texte ni à l'interface : aucune n'est tenue au contraste de 4,5:1. ---- */
    --ls-illus-stroke: #8c8e85;        /* traits d'une page dessinée, fond clair */
    --ls-illus-stroke-dark: #74766e;   /* les mêmes traits, fond sombre */
    --ls-illus-page-dark: #141414;     /* fond d'une page sombre dessinée */
    --ls-illus-bar-light: #e5e5e5;     /* barre claire sur une page sombre dessinée */
    --ls-illus-tile-dark: #2b2b2b;     /* vignettes d'une page sombre dessinée */
    --ls-illus-board: #f1f1ec;         /* fond de la planche du logo */

    /* ---- couleurs d'appareil : l'écran d'un cadre d'appareil pendant le chargement d'une capture.
       Pas pour du texte d'interface ; device-label ne se pose que sur device-screen (10,1:1). ---- */
    --ls-device-screen: #0c0c0c;
    --ls-device-label: #b9bbb2;
    --ls-device-track: #2a2c28;        /* rail de la barre de chargement */

    /* ---- ombres ---- */
    --ls-shadow: 0 1px 0 rgba(13, 14, 12, 0.03), 0 28px 56px -28px rgba(13, 14, 12, 0.18); /* cartes posées, menus */
    --ls-shadow-frame: 0 14px 28px -18px rgba(0, 0, 0, 0.35);  /* cadre de navigateur, appareil */
    --ls-shadow-modal: 0 40px 90px -24px rgba(13, 14, 12, 0.5);
    --ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ls-hover-ring: 0 0 0 3px color-mix(in srgb, var(--ls-ink) 8%, transparent);

    /* ---- typographie ---- */
    --ls-font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --ls-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* données techniques seulement */

    --ls-text-display: 58px;   /* titre du hero */
    --ls-text-h1: 42px;        /* titre de section */
    --ls-text-h2: 36px;        /* titre de page d'application, de formulaire */
    --ls-text-h3: 27px;        /* titre de carte centrée */
    --ls-text-h4: 21px;        /* titre de carte */
    --ls-text-lead: 18px;      /* chapeau */
    --ls-text-lg: 17px;        /* phrase à dire à son agent, sous-titre d'étape */
    --ls-text-md: 15px;        /* texte courant (base) */
    --ls-text-sm: 14px;        /* boutons, notes */
    --ls-text-xs: 13px;        /* légendes, pastilles */
    --ls-text-2xs: 12px;       /* étiquettes de bouton Copy, code serré */
    --ls-text-label: 11px;     /* surtitre en Geist Mono, capitales */
    --ls-text-code: 12.5px;    /* blocs de code */

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

    --ls-leading-display: 1.06;
    --ls-leading-title: 1.1;
    --ls-leading-snug: 1.35;
    --ls-leading-body: 1.5;
    --ls-leading-code: 1.7;

    --ls-tracking-display: -0.045em;
    --ls-tracking-h1: -0.04em;
    --ls-tracking-h2: -0.035em;
    --ls-tracking-h3: -0.03em;
    --ls-tracking-h4: -0.025em;
    --ls-tracking-lg: -0.012em;
    --ls-tracking-label: 0.08em;

    /* ---- espacements (pas de 2 puis de 4) ---- */
    --ls-space-1: 2px;
    --ls-space-2: 4px;
    --ls-space-3: 6px;
    --ls-space-4: 8px;
    --ls-space-5: 10px;
    --ls-space-6: 12px;
    --ls-space-7: 14px;
    --ls-space-8: 16px;
    --ls-space-10: 20px;
    --ls-space-12: 24px;
    --ls-space-14: 28px;
    --ls-space-16: 32px;
    --ls-space-20: 40px;
    --ls-space-24: 48px;
    --ls-space-28: 56px;
    --ls-space-32: 64px;
    --ls-space-36: 72px;
    --ls-space-44: 88px;

    /* ---- rayons ---- */
    --ls-radius-xs: 5px;       /* étiquettes, touches */
    --ls-radius-sm: 7px;       /* petits boutons (Copy), onglets */
    --ls-radius-md: 9px;       /* boutons */
    --ls-radius-lg: 11px;      /* grands boutons, champs, rangées d'option */
    --ls-radius-xl: 14px;      /* champ de chat, blocs de code, petites cartes */
    --ls-radius-2xl: 16px;     /* cartes */
    --ls-radius-3xl: 20px;     /* cartes centrées, fenêtres modales */
    --ls-radius-full: 999px;

    /* ---- tailles de contrôle ---- */
    --ls-control-sm: 36px;
    --ls-control-md: 44px;     /* défaut, et plancher tactile */
    --ls-control-lg: 48px;
    --ls-touch: 44px;          /* cible minimale au téléphone ; control-md est une hauteur de dessin, les deux peuvent diverger */

    /* ---- mouvement ---- */
    --ls-dur-fast: 120ms;      /* survol, pression */
    --ls-dur-base: 200ms;      /* interrupteur, apparition d'un menu */
    --ls-dur-slow: 350ms;      /* fondu d'image */
    --ls-dur-scene: 8s;        /* boucle d'une petite scène animée */
    --ls-ease: ease;
    --ls-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ls-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ---- mise en page ---- */
    --ls-width-frame: 1200px;  /* colonne du site */
    --ls-width-app: 1160px;    /* contenu d'un écran d'application à deux colonnes */
    --ls-width-prose: 620px;   /* texte long */
    --ls-width-form: 400px;    /* formulaire d'inscription */
    --ls-width-dialog: 440px;  /* carte centrée */
    --ls-width-sidebar: 252px;
    --ls-gutter: 32px;         /* marge latérale au bureau */
    --ls-gutter-phone: 16px;
    --ls-bar: 68px;            /* hauteur des barres du haut */
    --ls-bar-phone: 60px;

    /* points de rupture (les media queries ne lisent pas les variables : ces valeurs font foi, à recopier) */
    --ls-bp-phone: 640px;      /* en dessous : une colonne, cibles de 44 px */
    --ls-bp-tablet: 1024px;    /* en dessous : la navigation latérale se replie */
    --ls-bp-desktop: 1280px;

    --ls-z-raised: 1;
    --ls-z-menu: 6;
    --ls-z-modal: 20;

    color-scheme: light;
}

/* ---------- sombre ---------- */
[data-theme='dark'],
.ls-dark,
.ls-invert {
    --ls-ground: #0a0b0a;
    --ls-surface: #101210;
    --ls-sunk: #161816;
    --ls-ink: #f1f2ec;         /* 17,5 / 16,7 / 15,9 */
    --ls-body: #c9cbc2;        /* 12,0 / 11,5 / 10,9 */
    --ls-muted: #9a9c93;       /* 7,1 / 6,8 / 6,4 */
    --ls-faint: #8a8c84;       /* 5,8 / 5,5 / 5,2 */
    --ls-line: #212420;
    --ls-line-strong: #2c302a;
    --ls-signal: #c8f542;
    --ls-signal-hover: #d4fa5c;
    --ls-signal-active: #bce833;
    --ls-on-signal: #0d0e0c;
    --ls-signal-edge: rgba(13, 14, 12, 0.14);
    --ls-signal-ring: color-mix(in srgb, var(--ls-signal) 22%, transparent);
    --ls-signal-wash: color-mix(in srgb, var(--ls-signal) 14%, var(--ls-surface));
    --ls-cta: #c8f542;
    --ls-cta-hover: #d4fa5c;
    --ls-on-cta: #0d0e0c;
    --ls-ok: #c8f542;
    --ls-ok-bg: #1a2010;
    --ls-warn: #f0b35a;
    --ls-warn-bg: #2a2113;
    --ls-bad: #f2857d;
    --ls-bad-bg: #2b1615;
    --ls-veil: rgba(0, 0, 0, 0.6);
    --ls-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 28px 56px -28px rgba(0, 0, 0, 0.7);
    --ls-shadow-frame: 0 14px 28px -18px rgba(0, 0, 0, 0.7);
    --ls-shadow-modal: 0 40px 90px -24px rgba(0, 0, 0, 0.8);
    --ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ls-hover-ring: 0 0 0 3px color-mix(in srgb, var(--ls-ink) 10%, transparent);
    color-scheme: dark;
}

/* Un panneau inversé posé DANS une page déjà sombre se détache d'un cran. */
[data-theme='dark'] .ls-invert:not(.ls-light *),
.ls-dark .ls-invert:not(.ls-light *) {
    --ls-ground: #111311;
    --ls-surface: #171a17;
    --ls-sunk: #1d201d;
    --ls-line: #2a2e29;
    --ls-line-strong: #363b34;
}