/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  theme.css
   Jetons de design. C'est LE fichier a copier en premier dans un projet :
   tous les composants de la bibliotheque ne lisent que ces variables.
   Changer la palette = changer 6 lignes, sans toucher aux composants.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. JETONS STRUCTURELS  (identiques dans tous les themes)
   ------------------------------------------------------------------------ */
:root {
  /* Rayons */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Espacements (echelle 4px) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Typographie */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

  /* Transitions */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 200ms cubic-bezier(.4,0,.2,1);
  --t-slow: 320ms cubic-bezier(.4,0,.2,1);
  --t-spring: 420ms cubic-bezier(.34,1.56,.64,1);

  /* Hauteurs de controle (cible tactile : jamais sous 44px en mobile) */
  --h-xs: 26px; --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --h-xl: 56px;
}

/* ---------------------------------------------------------------------------
   2. PALETTE PAR DEFAUT  -  "Ardoise & Bleu"  (mode clair)
   Chaque palette definit exactement les memes 24 jetons.
   ------------------------------------------------------------------------ */
:root,
[data-palette="ardoise"] {
  --c-bg:            #f6f7f9;   /* fond de page */
  --c-surface:       #ffffff;   /* cartes, panneaux */
  --c-surface-2:     #f0f2f5;   /* surface enfoncee, lignes alternees */
  --c-surface-3:     #e4e7ec;   /* survol de surface */
  --c-border:        #d8dce3;   /* bordures neutres */
  --c-border-strong: #b7bdc8;
  --c-text:          #15181d;   /* texte principal */
  --c-text-soft:     #4a5260;   /* texte secondaire */
  --c-text-muted:    #79818f;   /* legendes, placeholders */

  --c-primary:       #2563eb;
  --c-primary-hover: #1d4ed8;
  --c-primary-press: #1e40af;
  --c-primary-soft:  #dbe6fe;   /* fond tonal (bouton tonal, badges) */
  --c-primary-text:  #ffffff;   /* texte SUR primary */
  --c-primary-ink:   #1a44a8;   /* texte primary sur fond clair */

  --c-accent:        #7c3aed;
  --c-success:       #16a34a;  --c-success-soft: #dcfce7;
  --c-warn:          #d97706;  --c-warn-soft:    #fef3c7;
  --c-danger:        #dc2626;  --c-danger-soft:  #fee2e2;
  --c-danger-hover:  #b91c1c;
  --c-info:          #0891b2;  --c-info-soft:    #cffafe;

  --c-focus:         #2563eb;  /* anneau de focus clavier */
  --c-overlay:       rgba(15,18,24,.45);

  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-2: 0 2px 4px rgba(16,24,40,.06), 0 4px 8px rgba(16,24,40,.08);
  --sh-3: 0 4px 8px rgba(16,24,40,.06), 0 12px 24px rgba(16,24,40,.10);
  --sh-4: 0 8px 16px rgba(16,24,40,.08), 0 24px 48px rgba(16,24,40,.14);
  --sh-primary: 0 4px 14px rgba(37,99,235,.35);
}

/* --- Mode sombre de la palette par defaut --------------------------------- */
[data-theme="dark"],
[data-theme="dark"][data-palette="ardoise"] {
  --c-bg:            #0e1116;
  --c-surface:       #171b22;
  --c-surface-2:     #1f242d;
  --c-surface-3:     #2a303b;
  --c-border:        #2e3440;
  --c-border-strong: #444c5c;
  --c-text:          #eef1f6;
  --c-text-soft:     #b3bbc9;
  --c-text-muted:    #7d879a;

  --c-primary:       #4d84f5;
  --c-primary-hover: #6b9bff;
  --c-primary-press: #3a6fdd;
  --c-primary-soft:  #1c2c4d;
  --c-primary-text:  #08101f;
  --c-primary-ink:   #93b6ff;

  --c-accent:        #a97bff;
  --c-success:       #35c46a;  --c-success-soft: #10301c;
  --c-warn:          #eab308;  --c-warn-soft:    #33260a;
  --c-danger:        #f2564d;  --c-danger-soft:  #3a1614;
  --c-danger-hover:  #ff6d64;
  --c-info:          #22b8d4;  --c-info-soft:    #0c2c33;

  --c-focus:         #6b9bff;
  --c-overlay:       rgba(0,0,0,.65);

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.45);
  --sh-3: 0 8px 20px rgba(0,0,0,.5);
  --sh-4: 0 16px 40px rgba(0,0,0,.6);
  --sh-primary: 0 4px 16px rgba(77,132,245,.4);
}

/* ---------------------------------------------------------------------------
   3. PALETTES ALTERNATIVES
   Usage : <body data-palette="vert"> ou sur n'importe quel conteneur.
   ------------------------------------------------------------------------ */

/* --- Vert energie : electricien, renovation energetique, PAC ------------- */
[data-palette="vert"] {
  --c-bg: #f4f8f5; --c-surface: #ffffff; --c-surface-2: #eef4ef; --c-surface-3: #e0eae2;
  --c-border: #d3e0d6; --c-border-strong: #b0c4b4;
  --c-text: #101a13; --c-text-soft: #445248; --c-text-muted: #74837a;
  --c-primary: #17803d; --c-primary-hover: #12652f; --c-primary-press: #0d4f25;
  --c-primary-soft: #d6f0de; --c-primary-text: #ffffff; --c-primary-ink: #11602e;
  --c-accent: #0d9488;
  --c-success: #17803d; --c-success-soft: #d6f0de;
  --c-warn: #ca8a04;   --c-warn-soft: #fef3c7;
  --c-danger: #dc2626; --c-danger-soft: #fee2e2; --c-danger-hover: #b91c1c;
  --c-info: #0891b2;   --c-info-soft: #cffafe;
  --c-focus: #17803d; --c-overlay: rgba(10,26,16,.45);
  --sh-primary: 0 4px 14px rgba(23,128,61,.32);
}
[data-theme="dark"][data-palette="vert"] {
  --c-bg: #0b120d; --c-surface: #141d17; --c-surface-2: #1c281f; --c-surface-3: #26352a;
  --c-border: #2a3a2e; --c-border-strong: #415a47;
  --c-text: #ecf4ee; --c-text-soft: #b0c2b5; --c-text-muted: #7d8f83;
  --c-primary: #34c26a; --c-primary-hover: #4dd97f; --c-primary-press: #26a355;
  --c-primary-soft: #14311f; --c-primary-text: #06140a; --c-primary-ink: #7fe0a2;
  --c-accent: #2dd4bf;
  --c-success: #34c26a; --c-success-soft: #14311f;
  --c-warn: #eab308;   --c-warn-soft: #33260a;
  --c-danger: #f2564d; --c-danger-soft: #3a1614; --c-danger-hover: #ff6d64;
  --c-info: #22b8d4;   --c-info-soft: #0c2c33;
  --c-focus: #4dd97f; --c-overlay: rgba(0,0,0,.65);
  --sh-primary: 0 4px 16px rgba(52,194,106,.35);
}

/* --- Orange chantier : plombier, chauffagiste, artisan ------------------- */
[data-palette="orange"] {
  --c-bg: #faf7f3; --c-surface: #ffffff; --c-surface-2: #f5efe8; --c-surface-3: #ece2d6;
  --c-border: #e2d6c8; --c-border-strong: #c7b6a3;
  --c-text: #1c1512; --c-text-soft: #524740; --c-text-muted: #86776c;
  --c-primary: #ea6a12; --c-primary-hover: #cc5a0c; --c-primary-press: #a94a09;
  --c-primary-soft: #fde8d3; --c-primary-text: #ffffff; --c-primary-ink: #b8530c;
  --c-accent: #0369a1;
  --c-success: #16a34a; --c-success-soft: #dcfce7;
  --c-warn: #d97706;   --c-warn-soft: #fef3c7;
  --c-danger: #dc2626; --c-danger-soft: #fee2e2; --c-danger-hover: #b91c1c;
  --c-info: #0891b2;   --c-info-soft: #cffafe;
  --c-focus: #ea6a12; --c-overlay: rgba(28,21,18,.45);
  --sh-primary: 0 4px 14px rgba(234,106,18,.35);
}
[data-theme="dark"][data-palette="orange"] {
  --c-bg: #14100c; --c-surface: #1e1813; --c-surface-2: #29211a; --c-surface-3: #362c22;
  --c-border: #3a2f25; --c-border-strong: #57473a;
  --c-text: #f6efe8; --c-text-soft: #c4b5a8; --c-text-muted: #8f8074;
  --c-primary: #fb8b3c; --c-primary-hover: #ffa15c; --c-primary-press: #e3762a;
  --c-primary-soft: #3a2413; --c-primary-text: #180d04; --c-primary-ink: #ffb27a;
  --c-accent: #38bdf8;
  --c-success: #35c46a; --c-success-soft: #10301c;
  --c-warn: #eab308;   --c-warn-soft: #33260a;
  --c-danger: #f2564d; --c-danger-soft: #3a1614; --c-danger-hover: #ff6d64;
  --c-info: #22b8d4;   --c-info-soft: #0c2c33;
  --c-focus: #ffa15c; --c-overlay: rgba(0,0,0,.65);
  --sh-primary: 0 4px 16px rgba(251,139,60,.35);
}

/* --- Violet SaaS : produit logiciel, tableau de bord --------------------- */
[data-palette="violet"] {
  --c-bg: #f8f7fc; --c-surface: #ffffff; --c-surface-2: #f2f0fa; --c-surface-3: #e8e4f5;
  --c-border: #ddd8ee; --c-border-strong: #bcb3d8;
  --c-text: #17131f; --c-text-soft: #4c4459; --c-text-muted: #7e7590;
  --c-primary: #7c3aed; --c-primary-hover: #6b2bd9; --c-primary-press: #5b21b6;
  --c-primary-soft: #ece2fe; --c-primary-text: #ffffff; --c-primary-ink: #6428ca;
  --c-accent: #db2777;
  --c-success: #16a34a; --c-success-soft: #dcfce7;
  --c-warn: #d97706;   --c-warn-soft: #fef3c7;
  --c-danger: #dc2626; --c-danger-soft: #fee2e2; --c-danger-hover: #b91c1c;
  --c-info: #0891b2;   --c-info-soft: #cffafe;
  --c-focus: #7c3aed; --c-overlay: rgba(23,19,31,.45);
  --sh-primary: 0 4px 14px rgba(124,58,237,.35);
}
[data-theme="dark"][data-palette="violet"] {
  --c-bg: #100c17; --c-surface: #1a1523; --c-surface-2: #241d30; --c-surface-3: #30273f;
  --c-border: #332a42; --c-border-strong: #4d4162;
  --c-text: #f0ecf7; --c-text-soft: #bab1cc; --c-text-muted: #877d9b;
  --c-primary: #a274ff; --c-primary-hover: #b790ff; --c-primary-press: #8c58f0;
  --c-primary-soft: #2a1d47; --c-primary-text: #0d0616; --c-primary-ink: #c2a3ff;
  --c-accent: #f472b6;
  --c-success: #35c46a; --c-success-soft: #10301c;
  --c-warn: #eab308;   --c-warn-soft: #33260a;
  --c-danger: #f2564d; --c-danger-soft: #3a1614; --c-danger-hover: #ff6d64;
  --c-info: #22b8d4;   --c-info-soft: #0c2c33;
  --c-focus: #b790ff; --c-overlay: rgba(0,0,0,.65);
  --sh-primary: 0 4px 16px rgba(162,116,255,.4);
}

/* --- Mono : noir et blanc, editorial, brutaliste, luxe ------------------- */
[data-palette="mono"] {
  --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-2: #f4f4f4; --c-surface-3: #e8e8e8;
  --c-border: #d4d4d4; --c-border-strong: #171717;
  --c-text: #0a0a0a; --c-text-soft: #404040; --c-text-muted: #737373;
  --c-primary: #0a0a0a; --c-primary-hover: #262626; --c-primary-press: #000000;
  --c-primary-soft: #ededed; --c-primary-text: #ffffff; --c-primary-ink: #0a0a0a;
  --c-accent: #0a0a0a;
  --c-success: #15803d; --c-success-soft: #e8f2ea;
  --c-warn: #a16207;   --c-warn-soft: #f5efdf;
  --c-danger: #b91c1c; --c-danger-soft: #f6e6e6; --c-danger-hover: #991b1b;
  --c-info: #1e40af;   --c-info-soft: #e6ebf7;
  --c-focus: #0a0a0a; --c-overlay: rgba(0,0,0,.55);
  --sh-primary: 0 4px 14px rgba(0,0,0,.25);
}
[data-theme="dark"][data-palette="mono"] {
  --c-bg: #0a0a0a; --c-surface: #141414; --c-surface-2: #1c1c1c; --c-surface-3: #282828;
  --c-border: #2e2e2e; --c-border-strong: #fafafa;
  --c-text: #fafafa; --c-text-soft: #b8b8b8; --c-text-muted: #808080;
  --c-primary: #fafafa; --c-primary-hover: #ffffff; --c-primary-press: #d4d4d4;
  --c-primary-soft: #242424; --c-primary-text: #0a0a0a; --c-primary-ink: #fafafa;
  --c-accent: #fafafa;
  --c-success: #4ade80; --c-success-soft: #16301f;
  --c-warn: #facc15;   --c-warn-soft: #332a0a;
  --c-danger: #f87171; --c-danger-soft: #3a1616; --c-danger-hover: #fca5a5;
  --c-info: #60a5fa;   --c-info-soft: #142033;
  --c-focus: #fafafa; --c-overlay: rgba(0,0,0,.75);
  --sh-primary: 0 4px 16px rgba(255,255,255,.15);
}

/* --- Bleu nuit : premium, immobilier, finance --------------------------- */
[data-palette="nuit"] {
  --c-bg: #f5f7fa; --c-surface: #ffffff; --c-surface-2: #eef1f6; --c-surface-3: #e1e6ef;
  --c-border: #d5dce7; --c-border-strong: #aab5c7;
  --c-text: #0d1626; --c-text-soft: #43506a; --c-text-muted: #74809a;
  --c-primary: #1e3a5f; --c-primary-hover: #162c49; --c-primary-press: #0f2038;
  --c-primary-soft: #dbe4f0; --c-primary-text: #ffffff; --c-primary-ink: #1e3a5f;
  --c-accent: #c19a4b;
  --c-success: #15803d; --c-success-soft: #dcfce7;
  --c-warn: #b45309;   --c-warn-soft: #fef3c7;
  --c-danger: #b91c1c; --c-danger-soft: #fee2e2; --c-danger-hover: #991b1b;
  --c-info: #0e7490;   --c-info-soft: #cffafe;
  --c-focus: #1e3a5f; --c-overlay: rgba(13,22,38,.5);
  --sh-primary: 0 4px 14px rgba(30,58,95,.3);
}
[data-theme="dark"][data-palette="nuit"] {
  --c-bg: #080d16; --c-surface: #111a29; --c-surface-2: #182336; --c-surface-3: #223047;
  --c-border: #24334a; --c-border-strong: #3c5074;
  --c-text: #e9eef7; --c-text-soft: #aab8cd; --c-text-muted: #7a8aa3;
  --c-primary: #5a8fd0; --c-primary-hover: #78a7e2; --c-primary-press: #4477b5;
  --c-primary-soft: #16273f; --c-primary-text: #050b14; --c-primary-ink: #9cc0ea;
  --c-accent: #d9b566;
  --c-success: #35c46a; --c-success-soft: #10301c;
  --c-warn: #eab308;   --c-warn-soft: #33260a;
  --c-danger: #f2564d; --c-danger-soft: #3a1614; --c-danger-hover: #ff6d64;
  --c-info: #22b8d4;   --c-info-soft: #0c2c33;
  --c-focus: #78a7e2; --c-overlay: rgba(0,0,0,.7);
  --sh-primary: 0 4px 16px rgba(90,143,208,.35);
}

/* ---------------------------------------------------------------------------
   4. PREFERENCES SYSTEME
   Sans data-theme explicite, on suit le reglage de l'appareil.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}