/* Le thème « Papier ivoire » — UNE seule source pour l'espace cabinet (React,
 * via `src/index.css`) ET le portail client (`portail.html`, page sans build).
 *
 * Ivoire par défaut (décision SAGESPRIME, 2026-10-07 : « grand cabinet » — papier
 * ivoire, titres serif, vert profond et or ; le sombre fatiguait sur des tableaux
 * de chiffres). L'ancien « Nuit émeraude » reste en option sous
 * `:root[data-theme="dark"]` (bouton soleil/lune). Contrastes vérifiés (WCAG AA,
 * ≥ 4,5:1 sur ivoire pour tout texte) : l'or LISIBLE est `--gold` (#7D6327) ;
 * l'or clair (#A88B4A) n'irait que pour un filet, jamais pour du texte.
 *
 * Marque blanche : la page pose la couleur du cabinet dans `--marque`
 * (`src/composants/marque.ts`, `portail.js`), et RIEN d'autre. Le thème en
 * dérive l'accent : assombri sur l'ivoire (texte blanc dessus), éclairci en
 * sombre (texte foncé dessus). Un bleu marine reste donc lisible dans les deux
 * thèmes sans qu'aucun écran ne s'en occupe.
 *
 * Fichier PUBLIC (`api/auth.py`, PAGES_PUBLIQUES) : le portail client n'a pas
 * d'identifiant, il doit pouvoir le charger. */

:root {
  color-scheme: light;

  /* Fond et surfaces : le papier, et la feuille posée dessus */
  --bg: #faf7f0;
  --bg2: #f2ede2;
  --surface: #fffdf8;
  --surface2: #f4efe4;
  --surface-solide: #fffdf8;
  --line: #e6dfd0;
  --line2: #d3c8b2;

  /* Encre */
  --ink: #1c2a23;
  --inksoft: #3d4a43;
  --muted: #66706a;

  /* Accent (vert profond, ou la couleur du cabinet) et or */
  --accent: #1f4d3a;
  --on-accent: #ffffff;
  --gold: #7d6327;
  --sky: #2f5f8a;

  /* États */
  --pos: #2e6b4f;
  --posbg: #e6efe8;
  --neg: #9c3b2a;
  --negbg: #f6e6e0;
  --warn: #8a5a12;
  --warnbg: #f7edd8;

  /* Relief : une ombre de papier, pas de halo */
  --ombre: 0 1px 2px rgba(60, 50, 30, 0.05), 0 10px 28px -22px rgba(60, 50, 30, 0.28);
  --ombre-haute: 0 2px 4px rgba(60, 50, 30, 0.06), 0 22px 44px -26px rgba(60, 50, 30, 0.36);
  --halo: transparent;
  --halo-or: transparent;
  --halo-ciel: transparent;

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
}

/* « Nuit émeraude », le thème d'avant, en option. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070d0b;
  --bg2: #0b1411;
  --surface: rgba(20, 31, 27, 0.82);
  --surface2: rgba(255, 255, 255, 0.035);
  --surface-solide: #111b17;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.15);

  --ink: #eef4f0;
  --inksoft: #a9b8b0;
  --muted: #7d8e86;

  --accent: #37d9a6;
  --on-accent: #04120d;
  --gold: #e8c583;
  --sky: #74b7ff;

  --pos: #49e0a4;
  --posbg: rgba(55, 217, 166, 0.12);
  --neg: #ff8b6a;
  --negbg: rgba(255, 139, 106, 0.12);
  --warn: #f0b45f;
  --warnbg: rgba(240, 180, 95, 0.12);

  --ombre: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  --ombre-haute: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 28px 60px -30px rgba(0, 0, 0, 0.95);
  --halo: rgba(55, 217, 166, 0.16);
  --halo-or: rgba(232, 197, 131, 0.11);
  --halo-ciel: rgba(116, 183, 255, 0.07);
}

/* La couleur du cabinet, ramenée dans la bonne plage de clarté pour chaque
 * thème. Navigateur trop ancien pour la syntaxe relative : le vert profond reste. */
@supports (color: oklch(from red l c h)) {
  :root {
    --accent: oklch(from var(--marque, #1f4d3a) min(l, 0.52) c h);
  }
  :root[data-theme="dark"] {
    --accent: oklch(from var(--marque, #37d9a6) max(l, 0.78) c h);
  }
}

/* L'accent foncé (survol d'un bouton plein) se déduit toujours de l'accent. */
:root {
  --accentd: color-mix(in oklab, var(--accent) 84%, black);
}

/* Les règles d’éléments vont en couche « base » : dans l’app, une classe
 * Tailwind (`focus:outline-none`…) garde le dernier mot. Même ordre de
 * couches que Tailwind, déclaré ici puisque ce fichier se charge en premier. */
@layer theme, base, components, utilities;

@layer base {
  /* Le fond : du papier en ivoire ; en « Nuit émeraude », trois halos qui
     dérivent lentement derrière tout. */
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  body::before {
    content: "";
    position: fixed;
    inset: -20% -10% -10% -10%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(46% 40% at 12% 6%, var(--halo), transparent 62%),
      radial-gradient(40% 42% at 92% 96%, var(--halo-or), transparent 60%),
      radial-gradient(50% 45% at 82% 12%, var(--halo-ciel), transparent 60%),
      linear-gradient(160deg, var(--bg2), var(--bg));
  }
  :root[data-theme="dark"] body::before {
    animation: theme-derive 26s ease-in-out infinite alternate;
  }
  @keyframes theme-derive {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}