/* =====================================================================
   CAPPS — jetons de conception (design tokens) · clair « Clarté » + sombre « Nuit »
   ---------------------------------------------------------------------
   Fichier autonome, sans sélecteur de composant : il peut être repris
   TEL QUEL par l'application CAPPS (Angular) ou tout autre écran.

   Utilisation
   - Inclure ce fichier avant les feuilles de composants.
   - Thème : attribut data-theme="light" | "dark" sur <html>.
     Sans attribut, le thème suit prefers-color-scheme du système.
     (Le script wwwroot/js/capps-theme.js pose l'attribut avant le
      premier rendu à partir du choix mémorisé — clé localStorage
      « capps-theme ».)
   - Toujours consommer les rôles (--capps-color-*), jamais les
     valeurs brutes : le thème sombre ne redéfinit que les rôles.

   Règles de contraste (WCAG 2.2 AA, vérifiées)
   - --capps-color-primary : boutons et liens (≥ 4.5:1 sur fond et
     surface, dans les deux thèmes). En sombre, le bouton principal
     est cyan avec un texte bleu nuit (--capps-color-on-primary).
   - --capps-color-accent (#3A9BDC) : accents et grands éléments
     uniquement (≈ 3:1 sur blanc) — jamais pour du texte courant.
   - --capps-color-border-input : contour des champs ≥ 3:1.

   Police : une seule famille, Plus Jakarta Sans (OFL), auto-hébergée
   (wwwroot/fonts/plus-jakarta-sans/, déclarée dans capps-auth.css).
   ===================================================================== */

:root {
    /* --- Typographie --------------------------------------------------- */
    --capps-font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --capps-font-weight-regular: 400;
    --capps-font-weight-medium: 500;
    --capps-font-weight-semibold: 600;
    --capps-font-weight-bold: 700;
    --capps-font-weight-heavy: 800;
    --capps-text-xs: 0.75rem;     /* 12 */
    --capps-text-sm: 0.8125rem;   /* 13 */
    --capps-text-base: 0.875rem;  /* 14 */
    --capps-text-md: 1rem;        /* 16 */
    --capps-text-lg: 1.0625rem;   /* 17 */
    --capps-text-xl: 1.5rem;      /* 24 */
    --capps-text-2xl: 2.125rem;   /* 34 */
    --capps-text-display: 2.75rem;/* 44 */
    --capps-tracking-tight: -0.025em;
    --capps-tracking-eyebrow: 0.08em;

    /* --- Espacements, rayons, durées ---------------------------------- */
    --capps-space-1: 4px;
    --capps-space-2: 8px;
    --capps-space-3: 12px;
    --capps-space-4: 16px;
    --capps-space-5: 20px;
    --capps-space-6: 24px;
    --capps-space-8: 32px;
    --capps-space-10: 40px;
    --capps-space-12: 48px;
    --capps-space-14: 56px;
    --capps-radius-sm: 8px;
    --capps-radius-md: 12px;
    --capps-radius-lg: 16px;
    --capps-radius-xl: 20px;
    --capps-radius-2xl: 28px;
    --capps-radius-pill: 999px;
    --capps-control-height: 52px;
    --capps-button-height: 56px;
    --capps-duration-fast: 120ms;
    --capps-duration-base: 200ms;
    --capps-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* --- Marque (valeurs fixes, communes aux deux thèmes) ------------- */
    --capps-brand-blue: #3A9BDC;
    --capps-brand-cyan: #7EC8E3;
    --capps-brand-gradient: linear-gradient(90deg, #7EC8E3, #3A9BDC);

    /* --- Rôles de couleur : thème CLAIR (A « Clarté ») ---------------- */
    color-scheme: light;
    --capps-color-bg: #F4F8FC;
    --capps-color-surface: #FFFFFF;
    --capps-color-surface-raised: #FFFFFF;
    --capps-color-surface-selected: #F3F8FE;
    --capps-color-input-bg: #FFFFFF;
    --capps-color-panel: #E6F0FA;
    --capps-color-panel-grid: rgba(29, 111, 184, 0.07);
    --capps-color-panel-glow: rgba(126, 200, 227, 0);
    --capps-color-tile: #E9F2FB;
    --capps-color-skeleton: #DCE7F2;
    --capps-color-skeleton-strong: #C6D6E7;

    --capps-color-text: #0B1F33;
    --capps-color-text-secondary: #3E5368;
    --capps-color-text-muted: #5B6B7C;
    --capps-color-placeholder: #66768A;
    --capps-color-eyebrow: #165C9B;

    --capps-color-border: #D6E2EE;
    --capps-color-border-subtle: #E6EDF4;
    --capps-color-border-input: #8094A8;
    --capps-color-border-input-hover: #5B6B7C;

    --capps-color-primary: #1D6FB8;
    --capps-color-primary-hover: #165C9B;
    --capps-color-primary-active: #124D83;
    --capps-color-on-primary: #FFFFFF;
    --capps-color-primary-soft: rgba(29, 111, 184, 0.12);
    --capps-color-link: #1D6FB8;
    --capps-color-link-hover: #165C9B;
    --capps-color-accent: #3A9BDC;
    --capps-color-chart-fill: rgba(58, 155, 220, 0.14);

    --capps-color-focus: rgba(29, 111, 184, 0.6);
    --capps-color-focus-ring: rgba(29, 111, 184, 0.18);

    --capps-color-success: #0A7A4B;
    --capps-color-success-bg: #E7F6EE;
    --capps-color-success-border: #B8E3CC;
    --capps-color-warning: #B54708;
    --capps-color-danger: #B42318;
    --capps-color-danger-text: #912018;
    --capps-color-danger-bg: #FEF3F2;
    --capps-color-danger-border: #F4C7C1;
    --capps-color-danger-ring: rgba(180, 35, 24, 0.12);
    --capps-color-meter-empty: #E3EAF2;

    --capps-shadow-card: 0 30px 60px -24px rgba(11, 31, 51, 0.28), 0 2px 6px rgba(11, 31, 51, 0.04);
    --capps-shadow-float: 0 18px 36px -18px rgba(11, 31, 51, 0.25);
    --capps-shadow-row: 0 10px 24px -14px rgba(11, 31, 51, 0.35);
    --capps-shadow-primary: 0 12px 24px -12px rgba(29, 111, 184, 0.7);
}

/* --- Rôles de couleur : thème SOMBRE (palette B « Nuit ») ------------- */
/* 1) choix explicite de l'utilisateur */
:root[data-theme="dark"] {
    color-scheme: dark;
    --capps-color-bg: #060D1A;
    --capps-color-surface: #0D1A30;
    --capps-color-surface-raised: #10213B;
    --capps-color-surface-selected: #102744;
    --capps-color-input-bg: #081325;
    --capps-color-panel: #0A1628;
    --capps-color-panel-grid: rgba(126, 200, 227, 0.06);
    --capps-color-panel-glow: rgba(58, 155, 220, 0.18);
    --capps-color-tile: rgba(126, 200, 227, 0.12);
    --capps-color-skeleton: #1B2D48;
    --capps-color-skeleton-strong: #27405F;

    --capps-color-text: #F4F8FC;
    --capps-color-text-secondary: #C9D7E5;
    --capps-color-text-muted: #A9BCD0;
    --capps-color-placeholder: #7F93A8;
    --capps-color-eyebrow: #7EC8E3;

    --capps-color-border: #22344F;
    --capps-color-border-subtle: #1A2A43;
    --capps-color-border-input: #56708F;
    --capps-color-border-input-hover: #7F93A8;

    --capps-color-primary: #7EC8E3;
    --capps-color-primary-hover: #A6DBEE;
    --capps-color-primary-active: #C2E8F5;
    --capps-color-on-primary: #04121F;
    --capps-color-primary-soft: rgba(126, 200, 227, 0.14);
    --capps-color-link: #8FD3EA;
    --capps-color-link-hover: #C2E8F5;
    --capps-color-accent: #7EC8E3;
    --capps-color-chart-fill: rgba(126, 200, 227, 0.16);

    --capps-color-focus: #7EC8E3;
    --capps-color-focus-ring: rgba(126, 200, 227, 0.22);

    --capps-color-success: #6FE0B0;
    --capps-color-success-bg: rgba(111, 224, 176, 0.12);
    --capps-color-success-border: rgba(111, 224, 176, 0.32);
    --capps-color-warning: #F5B961;
    --capps-color-danger: #FF8F7A;
    --capps-color-danger-text: #FFD9D2;
    --capps-color-danger-bg: #2A1620;
    --capps-color-danger-border: rgba(255, 143, 122, 0.45);
    --capps-color-danger-ring: rgba(255, 143, 122, 0.16);
    --capps-color-meter-empty: #1F3150;

    --capps-shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --capps-shadow-float: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
    --capps-shadow-row: 0 12px 28px -16px rgba(0, 0, 0, 0.8);
    --capps-shadow-primary: 0 12px 28px -14px rgba(126, 200, 227, 0.55);
}

/* 2) préférence système, sauf choix explicite du thème clair */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --capps-color-bg: #060D1A;
        --capps-color-surface: #0D1A30;
        --capps-color-surface-raised: #10213B;
        --capps-color-surface-selected: #102744;
        --capps-color-input-bg: #081325;
        --capps-color-panel: #0A1628;
        --capps-color-panel-grid: rgba(126, 200, 227, 0.06);
        --capps-color-panel-glow: rgba(58, 155, 220, 0.18);
        --capps-color-tile: rgba(126, 200, 227, 0.12);
        --capps-color-skeleton: #1B2D48;
        --capps-color-skeleton-strong: #27405F;

        --capps-color-text: #F4F8FC;
        --capps-color-text-secondary: #C9D7E5;
        --capps-color-text-muted: #A9BCD0;
        --capps-color-placeholder: #7F93A8;
        --capps-color-eyebrow: #7EC8E3;

        --capps-color-border: #22344F;
        --capps-color-border-subtle: #1A2A43;
        --capps-color-border-input: #56708F;
        --capps-color-border-input-hover: #7F93A8;

        --capps-color-primary: #7EC8E3;
        --capps-color-primary-hover: #A6DBEE;
        --capps-color-primary-active: #C2E8F5;
        --capps-color-on-primary: #04121F;
        --capps-color-primary-soft: rgba(126, 200, 227, 0.14);
        --capps-color-link: #8FD3EA;
        --capps-color-link-hover: #C2E8F5;
        --capps-color-accent: #7EC8E3;
        --capps-color-chart-fill: rgba(126, 200, 227, 0.16);

        --capps-color-focus: #7EC8E3;
        --capps-color-focus-ring: rgba(126, 200, 227, 0.22);

        --capps-color-success: #6FE0B0;
        --capps-color-success-bg: rgba(111, 224, 176, 0.12);
        --capps-color-success-border: rgba(111, 224, 176, 0.32);
        --capps-color-warning: #F5B961;
        --capps-color-danger: #FF8F7A;
        --capps-color-danger-text: #FFD9D2;
        --capps-color-danger-bg: #2A1620;
        --capps-color-danger-border: rgba(255, 143, 122, 0.45);
        --capps-color-danger-ring: rgba(255, 143, 122, 0.16);
        --capps-color-meter-empty: #1F3150;

        --capps-shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        --capps-shadow-float: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
        --capps-shadow-row: 0 12px 28px -16px rgba(0, 0, 0, 0.8);
        --capps-shadow-primary: 0 12px 28px -14px rgba(126, 200, 227, 0.55);
    }
}