/* ============================================================
   ALG CLUB — Design System (tokens)
   Marque : LUXE · SOBRE · ÉLÉGANT
   Base off-black + émeraude (accent unique) + or (héros only) + crème.
   100% portable (réutilisable quelle que soit la stack).
   ============================================================ */

/* ---- POLICES ----
   Garet (corps) : fichiers à déposer dans fonts/Garet/ (Book=400, Heavy=800).
   Maharlika (titres) : licence commerciale à confirmer → fallback Cormorant (OFL)
   chargé via Google Fonts dans index.html en attendant. */
@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet/Garet-Book.woff2") format("woff2"),
       url("../fonts/Garet/Garet-Book.woff")  format("woff"),
       url("../fonts/Garet/Garet-Book.ttf")   format("truetype");
  font-weight: 400 500;            /* Book couvre 400-500 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet/Garet-Heavy.woff2") format("woff2"),
       url("../fonts/Garet/Garet-Heavy.woff")  format("woff"),
       url("../fonts/Garet/Garet-Heavy.ttf")   format("truetype");
  font-weight: 600 800;            /* Heavy couvre 600-800 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maharlika";
  src: url("../fonts/Maharlika/Maharlika-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- SURFACES (off-black, jamais #000) ---------- */
  --alg-bg:         #101010;   /* canvas de base — noir NEUTRE (call 18/06) */
  --alg-bg-deep:    #0a0a0a;   /* recess le plus profond (vignette, scrim) */
  --alg-surface:    #181818;   /* carte / panneau (+1) */
  --alg-surface-2:  #202020;   /* surface surélevée (inputs, header table, hover) (+2) */
  --alg-surface-3:  #2a2a2a;   /* surface haute (onglet actif, ligne sélectionnée) (+3) */
  --alg-olive:      #1b1912;   /* sol héros : warm near-black, relevé pour détacher la carte du fond (P5) */
  --header-bg:      rgba(16,16,16,0.82);

  /* ---------- BORDURES (teintées champagne — l'or murmure partout) ---------- */
  --alg-border:        rgba(227,214,177,0.08);
  --alg-border-strong: rgba(227,214,177,0.16);

  /* ---------- TEXTE (crème, jamais blanc pur) ---------- */
  --alg-text:    #f4f1e8;
  --alg-text-2:  #a9a79c;
  --alg-text-3:  #87857b;   /* relevé : AA pour petits textes sur fond sombre (call P5) */

  /* ---------- ÉMERAUDE = accent fonctionnel UNIQUE ---------- */
  --alg-emerald:        #2a5b43;
  --alg-emerald-bright: #3a7d5c;   /* hover / segment clair */
  --alg-emerald-deep:   #1c3d2d;   /* pressed / segment foncé */
  --alg-emerald-ghost:  rgba(42,91,67,0.12);
  --alg-emerald-glow:   rgba(42,91,67,0.28);

  /* ---------- OR / CHAMPAGNE = métal précieux, héros UNIQUEMENT ---------- */
  --alg-gold:       #e3d6b1;
  --alg-gold-dim:   #9a906f;
  --alg-gold-ghost: rgba(227,214,177,0.10);

  /* ---------- DETTES = GRIS NEUTRE (call 18/06 : plus de rouge = pas « négatif »).
       #484848 sur fond clair ; relevé en gris lisible sur fond sombre. ---------- */
  --alg-debt:        #8d8a82;
  --alg-debt-ghost:  rgba(141,138,130,0.14);

  /* ---------- NÉGATIF = ERREUR / déficit réel seulement (plus les dettes) ---------- */
  --alg-negative:       #b4524a;
  --alg-negative-ghost: rgba(180,82,74,0.12);
  --alg-warning:        #b89a5c;   /* or terni — JAMAIS d'ambre (tue le rainbow) */

  --alg-scrim: rgba(0,0,0,0.72);
  --alg-scrim-pill: rgba(24,24,24,0.92);   /* fond des pastilles flottantes (démo) — theme-aware */
  --grid:      rgba(255,255,255,0.06);   /* quadrillage des graphiques (theme-aware) */

  /* ---------- HABILLAGE CARTES (theme-aware : référencés par .k/.card) ---------- */
  --card-bg:     var(--alg-surface);
  --card-sheen:  linear-gradient(180deg, rgba(227,214,177,0.025), rgba(227,214,177,0) 42%);
  --card-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 16px 38px -20px rgba(0,0,0,0.82), inset 0 1px 0 rgba(227,214,177,0.05);
  --card-edge:   linear-gradient(180deg, rgba(227,214,177,0.20), rgba(227,214,177,0.05) 36%, rgba(227,214,177,0.02));
  --hero-edge:   linear-gradient(180deg, rgba(227,214,177,0.48), rgba(227,214,177,0.13) 45%, rgba(227,214,177,0.05));
  --hero-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 22px 60px -26px rgba(227,214,177,0.20), inset 0 1px 0 rgba(227,214,177,0.10);

  /* ---------- TYPOGRAPHIE ---------- */
  --alg-font-display: "Maharlika", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --alg-font-sans:    "Garet", "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display: 44px;  --lh-display: 1.05;   /* chiffre héros, Maharlika 400, ls -0.01em */
  --fs-h1: 31px;       --lh-h1: 1.12;        /* titre page, Maharlika */
  --fs-h2: 25px;       --lh-h2: 1.2;         /* titre section, Maharlika */
  --fs-h3: 20px;       --lh-h3: 1.3;         /* titre carte, Garet 600 */
  --fs-body: 15px;     --lh-body: 1.55;      /* Garet 400 */
  --fs-label: 13px;    --lh-label: 1.4;      /* labels, cellules, Garet 500 */
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-micro: 11px;    --lh-micro: 1.3;      /* eyebrow MAJ 0.14em — SEUL all-caps permis */

  /* ---------- ESPACEMENT (base 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --container: 1180px;

  /* ---------- RADIUS ---------- */
  --r-xs: 3px;   /* inputs, chips */
  --r-sm: 6px;   /* boutons */
  --r-md: 10px;  /* cartes (défaut) */
  --r-lg: 14px;  /* héros, modale */
  --r-pill: 999px;

  /* ---------- OMBRES (teintées, jamais noir pur) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(227,214,177,0.03);
  --shadow-2: 0 4px 16px -4px rgba(0,0,0,0.7), inset 0 1px 0 rgba(227,214,177,0.04);
  --shadow-3: 0 18px 48px -12px rgba(0,0,0,0.85), 0 0 0 1px var(--alg-border-strong);
  --shadow-emerald: 0 6px 20px -6px rgba(42,91,67,0.45);
  --shadow-gold-halo: 0 0 0 1px var(--alg-gold-dim), 0 20px 60px -24px rgba(227,214,177,0.18);

  /* ---------- MOTION (retenue, « matériaux lourds qui se posent ») ---------- */
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;  --dur-hero: 600ms;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   THÈME CLAIR — dérivé du moodboard (crème + off-black + émeraude/champagne).
   Activé via <html data-theme="light"> (toggle lune/soleil dans le header).
   On n'override QUE les couleurs ; typo/espacements/rayons/motion héritent de :root.
   ============================================================ */
:root[data-theme="light"] {
  --alg-bg:         #eae8e1;   /* gris-papier clair : creuse l'écart avec les cartes blanches (îlots nets) */
  --alg-bg-deep:    #e0ded4;
  --alg-surface:    #fdfdfb;   /* carte = blanc franc DOUX (net, pas clinique) */
  --alg-surface-2:  #eeece4;
  --alg-surface-3:  #e3e0d6;
  --alg-olive:      #f6f1e4;   /* sol héros = blanc à peine champagne (plus de « tache » beige) */
  --header-bg:      rgba(243,242,238,0.9);

  --alg-border:        rgba(28,26,20,0.12);   /* un peu plus marquées → îlots mieux délimités */
  --alg-border-strong: rgba(28,26,20,0.19);

  --alg-text:    #1d1b15;   /* charbon chaud très foncé */
  --alg-text-2:  #4a463d;   /* ≈9:1 */
  --alg-text-3:  #5e594e;   /* ≈7:1 — confortable même en petit */

  --alg-emerald:        #2a5b43;
  --alg-emerald-bright: #2d6a49;   /* émeraude un peu plus vive → moins « lourde » sur fond clair */
  --alg-emerald-deep:   #1c3d2d;
  --alg-emerald-ghost:  rgba(45,106,73,0.10);
  --alg-emerald-glow:   rgba(45,106,73,0.18);

  --alg-gold:       #856721;   /* or profond LISIBLE — posé sur carte blanche (plus de beige-sur-beige) */
  --alg-gold-dim:   #7a6a3e;
  --alg-gold-ghost: rgba(133,103,33,0.12);

  --alg-debt:        #484848;   /* gris demandé — parfait sur fond clair */
  --alg-debt-ghost:  rgba(72,72,72,0.10);

  --alg-negative:       #a8443c;
  --alg-negative-ghost: rgba(168,68,60,0.10);
  --alg-warning:        #8a6f2e;

  --alg-scrim: rgba(20,18,12,0.45);
  --alg-scrim-pill: rgba(253,253,251,0.94);
  --grid:      rgba(20,18,12,0.09);

  --card-bg:     var(--alg-surface);
  --card-sheen:  linear-gradient(180deg, rgba(30,30,32,0.01), rgba(30,30,32,0) 42%);
  --card-shadow: 0 1px 2px rgba(42,42,46,0.07), 0 8px 22px -12px rgba(42,42,46,0.18);   /* îlots plus nettement détachés (doux mais lisible) */
  --card-edge:   linear-gradient(180deg, rgba(28,26,20,0.16), rgba(28,26,20,0.07) 40%, rgba(28,26,20,0.04));
  --hero-edge:   linear-gradient(180deg, rgba(133,103,33,0.36), rgba(133,103,33,0.12) 45%, rgba(133,103,33,0.04));
  --hero-shadow: 0 1px 2px rgba(42,42,46,0.06), 0 16px 34px -20px rgba(133,103,33,0.16);

  --shadow-1: 0 1px 2px rgba(42,42,46,0.07);
  --shadow-2: 0 4px 16px -4px rgba(42,42,46,0.10);
  --shadow-3: 0 18px 48px -12px rgba(42,42,46,0.15), 0 0 0 1px var(--alg-border-strong);
  --shadow-emerald: 0 6px 20px -6px rgba(45,106,73,0.22);
  --shadow-gold-halo: 0 0 0 1px var(--alg-gold-dim), 0 16px 40px -22px rgba(133,103,33,0.2);
}

/* Chiffres : tabular partout (montants/%) */
.tnum, .kv, .total-value, td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-hero: 0ms; }
}