/* =====================================================================
   Opera Populi : tokens de design (direction "Mosaïque")
   Uniquement des variables.
   Thème : "color-scheme: light dark" suit prefers-color-scheme ;
   [data-theme="light"] ou [data-theme="dark"] sur <html> force un thème (voir ui/theme.js).
   Chaque couleur est déclarée avec light-dark(clair, sombre) ; un repli
   "space toggle" en fin de fichier couvre les navigateurs sans light-dark().
   ===================================================================== */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: light-dark(#f6f0e6, #18120e);
  --bg-sunken: light-dark(#eee4d3, #120d0a);
  --surface: light-dark(#fffbf5, #231b16);
  --surface-2: light-dark(#f6eee2, #2b221c);
  --surface-3: light-dark(#ede2d2, #352a22);
  --line: light-dark(#e3d5c2, #3a2e25);
  --line-strong: light-dark(#cdbba3, #54443a);
  --field-border: light-dark(#9a8470, #7f6d5e);
  --grout: light-dark(#e7dac7, #0f0b09);
  --socket: light-dark(#dccdb7, #2a2019);
  --veil: light-dark(rgb(246 240 230 / .84), rgb(24 18 14 / .82));

  /* Texte */
  --text: light-dark(#2a1f18, #f4ebe0);
  --text-muted: light-dark(#6b5a4c, #bdac9b);
  --text-inverse: light-dark(#fffbf5, #18120e);

  /* Accent (terracotta) et focus (lapis) */
  --accent: light-dark(#b8462a, #eb8360);
  --accent-hover: light-dark(#983820, #f4a183);
  --accent-ink: light-dark(#fffbf5, #1f130d);
  --accent-soft: light-dark(#f7e3d9, #3a2219);
  --accent-text: light-dark(#a23d23, #f09472);
  --focus: light-dark(#2f5da8, #9dbdf5);
  --focus-ring: light-dark(rgb(47 93 168 / .3), rgb(157 189 245 / .35));

  /* Tesselles : palette de la mosaïque (décor, jamais porteuse de texte) */
  --tess-1: light-dark(#e2a42c, #d99a2b); /* safran */
  --tess-2: light-dark(#c4573a, #c9603f); /* terre cuite */
  --tess-3: light-dark(#dd8c84, #b8706a); /* rose */
  --tess-4: light-dark(#3f8f7a, #3d8b75); /* vert-de-gris */
  --tess-5: light-dark(#36619f, #4a74b8); /* lapis */
  --tess-6: light-dark(#e6d1aa, #6f5c49); /* sable */

  /* Statuts : fond doux / texte (AA sur le fond) / plein */
  --st-pending-bg: light-dark(#fbeac4, #3a2c10);
  --st-pending-fg: light-dark(#7a4f00, #f2c66b);
  --st-pending: var(--tess-1);
  --st-selected-bg: light-dark(#dde7f7, #1c2a45);
  --st-selected-fg: light-dark(#244c8c, #a9c4f2);
  --st-selected: var(--tess-5);
  --st-implemented-bg: light-dark(#d9efe6, #13302a);
  --st-implemented-fg: light-dark(#1d6452, #86d4bb);
  --st-implemented: var(--tess-4);
  --st-merged-bg: light-dark(#eee0ec, #34203a);
  --st-merged-fg: light-dark(#6d3a63, #e0b3d6);
  --st-merged: light-dark(#8e5283, #b77aac);
  --st-rejected-bg: light-dark(#f8ddd5, #3e1d15);
  --st-rejected-fg: light-dark(#9a3419, #f4a58a);
  --st-rejected: var(--tess-2);
  --st-moderated-bg: light-dark(#e7e2dc, #2e2a27);
  --st-moderated-fg: light-dark(#4d4640, #d3cac1);
  --st-moderated: light-dark(#6f665e, #8f857b);
  --st-expired-bg: light-dark(#e3e7ec, #242a31);
  --st-expired-fg: light-dark(#424b57, #c2cbd6);
  --st-expired: light-dark(#7a8594, #6f7b8c);
  --st-outdated-bg: light-dark(#d7eef1, #10292e);
  --st-outdated-fg: light-dark(#0d5a66, #95d6e2);
  --st-outdated: light-dark(#2b8797, #3ea2b4);

  /* Ombres (teinte chaude en clair, profonde en sombre) */
  --shadow-color: light-dark(rgb(92 52 24 / .09), rgb(0 0 0 / .42));
  --shadow-color-strong: light-dark(rgb(92 52 24 / .2), rgb(0 0 0 / .6));
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 1px 2px var(--shadow-color), 0 10px 24px -8px var(--shadow-color-strong);
  --shadow-lg: 0 2px 6px var(--shadow-color), 0 28px 56px -16px var(--shadow-color-strong);
  --shadow-inset: inset 0 1px 0 light-dark(rgb(255 255 255 / .22), rgb(255 255 255 / .12));

  /* Typographie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.15rem + .4vw, 1.4rem);
  --fs-2xl: clamp(1.55rem, 1.3rem + 1vw, 2rem);
  --fs-3xl: clamp(1.9rem, 1.45rem + 2vw, 2.75rem);
  --fs-display: clamp(2.3rem, 1.45rem + 3.7vw, 4.4rem);
  --fs-stat: clamp(1.9rem, 1.6rem + 1.1vw, 2.5rem);
  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: .09em;
  --soft: "SOFT" 60;

  /* Espacements (échelle 4 px) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 76rem;
  --header-h: 4.25rem;
  --nav-mobile-h: 4.25rem;

  /* Rayons (--r-2xs : tesselles et puces de quelques pixels) */
  --r-2xs: 3px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Transitions */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 520ms;
  /* Glissement d'une carte qui change de place (dom.flip) : lent, départ et arrivée en douceur */
  --ease-glide: cubic-bezier(.45, 0, .25, 1);
  --dur-glide: 1100ms;

  /* Plans */
  --z-header: 50;
  --z-nav: 60;
  --z-menu: 70;
}


:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- Repli sans light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120) ----------
   Space toggle : la variable qui vaut "initial" active sa valeur de repli, celle qui vaut " " s'efface.
   Clair par défaut ; sombre si le système est sombre (sauf thème clair forcé) ou si le thème sombre est forcé. */
@supports not (color: light-dark(#000, #fff)) {
  :root { --if-light: initial; --if-dark: ; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --if-light: ; --if-dark: initial; }
  }
  :root[data-theme="dark"] { --if-light: ; --if-dark: initial; }

  :root {
    --bg: var(--if-light, #f6f0e6) var(--if-dark, #18120e);
    --bg-sunken: var(--if-light, #eee4d3) var(--if-dark, #120d0a);
    --surface: var(--if-light, #fffbf5) var(--if-dark, #231b16);
    --surface-2: var(--if-light, #f6eee2) var(--if-dark, #2b221c);
    --surface-3: var(--if-light, #ede2d2) var(--if-dark, #352a22);
    --line: var(--if-light, #e3d5c2) var(--if-dark, #3a2e25);
    --line-strong: var(--if-light, #cdbba3) var(--if-dark, #54443a);
    --field-border: var(--if-light, #9a8470) var(--if-dark, #7f6d5e);
    --grout: var(--if-light, #e7dac7) var(--if-dark, #0f0b09);
    --socket: var(--if-light, #dccdb7) var(--if-dark, #2a2019);
    --veil: var(--if-light, rgb(246 240 230 / .84)) var(--if-dark, rgb(24 18 14 / .82));
    --text: var(--if-light, #2a1f18) var(--if-dark, #f4ebe0);
    --text-muted: var(--if-light, #6b5a4c) var(--if-dark, #bdac9b);
    --text-inverse: var(--if-light, #fffbf5) var(--if-dark, #18120e);
    --accent: var(--if-light, #b8462a) var(--if-dark, #eb8360);
    --accent-hover: var(--if-light, #983820) var(--if-dark, #f4a183);
    --accent-ink: var(--if-light, #fffbf5) var(--if-dark, #1f130d);
    --accent-soft: var(--if-light, #f7e3d9) var(--if-dark, #3a2219);
    --accent-text: var(--if-light, #a23d23) var(--if-dark, #f09472);
    --focus: var(--if-light, #2f5da8) var(--if-dark, #9dbdf5);
    --focus-ring: var(--if-light, rgb(47 93 168 / .3)) var(--if-dark, rgb(157 189 245 / .35));
    --tess-1: var(--if-light, #e2a42c) var(--if-dark, #d99a2b);
    --tess-2: var(--if-light, #c4573a) var(--if-dark, #c9603f);
    --tess-3: var(--if-light, #dd8c84) var(--if-dark, #b8706a);
    --tess-4: var(--if-light, #3f8f7a) var(--if-dark, #3d8b75);
    --tess-5: var(--if-light, #36619f) var(--if-dark, #4a74b8);
    --tess-6: var(--if-light, #e6d1aa) var(--if-dark, #6f5c49);
    --st-pending-bg: var(--if-light, #fbeac4) var(--if-dark, #3a2c10);
    --st-pending-fg: var(--if-light, #7a4f00) var(--if-dark, #f2c66b);
    --st-selected-bg: var(--if-light, #dde7f7) var(--if-dark, #1c2a45);
    --st-selected-fg: var(--if-light, #244c8c) var(--if-dark, #a9c4f2);
    --st-implemented-bg: var(--if-light, #d9efe6) var(--if-dark, #13302a);
    --st-implemented-fg: var(--if-light, #1d6452) var(--if-dark, #86d4bb);
    --st-merged-bg: var(--if-light, #eee0ec) var(--if-dark, #34203a);
    --st-merged-fg: var(--if-light, #6d3a63) var(--if-dark, #e0b3d6);
    --st-merged: var(--if-light, #8e5283) var(--if-dark, #b77aac);
    --st-rejected-bg: var(--if-light, #f8ddd5) var(--if-dark, #3e1d15);
    --st-rejected-fg: var(--if-light, #9a3419) var(--if-dark, #f4a58a);
    --st-moderated-bg: var(--if-light, #e7e2dc) var(--if-dark, #2e2a27);
    --st-moderated-fg: var(--if-light, #4d4640) var(--if-dark, #d3cac1);
    --st-moderated: var(--if-light, #6f665e) var(--if-dark, #8f857b);
    --st-expired-bg: var(--if-light, #e3e7ec) var(--if-dark, #242a31);
    --st-expired-fg: var(--if-light, #424b57) var(--if-dark, #c2cbd6);
    --st-expired: var(--if-light, #7a8594) var(--if-dark, #6f7b8c);
    --st-outdated-bg: var(--if-light, #d7eef1) var(--if-dark, #10292e);
    --st-outdated-fg: var(--if-light, #0d5a66) var(--if-dark, #95d6e2);
    --st-outdated: var(--if-light, #2b8797) var(--if-dark, #3ea2b4);
    --shadow-color: var(--if-light, rgb(92 52 24 / .09)) var(--if-dark, rgb(0 0 0 / .42));
    --shadow-color-strong: var(--if-light, rgb(92 52 24 / .2)) var(--if-dark, rgb(0 0 0 / .6));
    --shadow-inset: inset 0 1px 0 var(--if-light, rgb(255 255 255 / .22)) var(--if-dark, rgb(255 255 255 / .12));
  }
}