/* ------------------------------------------------------------------------
   Design tokens — « Salle de lecture »
   Two intentional moods:
     encre  : deep petrol ink, gallery-at-night; the printed frame of the
              planches melts into the stage and the page glows.
     papier : warm cream paper wall; the planche reads as a framed print.
   Accents are drawn from the artwork: the petrol keyline of the page
   frames and the warm coral of the scarves.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --chrome-top: 64px;
  --chrome-bottom: 76px;
  --stage-pad: 18px;

  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 560ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.55, 0, 0.8, 0.4);

  --grain-opacity: 0.05;
}

/* --------------------------------------------------------------- encre -- */
:root,
:root[data-theme="encre"] {
  color-scheme: dark;

  --bg: oklch(21.5% 0.018 225);
  --bg-deep: oklch(16.5% 0.02 230);
  --text: oklch(93% 0.012 85);
  --muted: oklch(71% 0.016 220);
  --line: oklch(93% 0.012 85 / 0.11);

  --accent: oklch(75% 0.085 195);
  --accent-warm: oklch(77% 0.115 45);
  --accent-soft: oklch(75% 0.085 195 / 0.14);

  --btn-bg: oklch(16.5% 0.02 230 / 0.42);
  --btn-bg-hover: oklch(16.5% 0.02 230 / 0.72);
  --panel-bg: oklch(17.5% 0.02 228 / 0.92);

  --stage-light: oklch(82% 0.05 200 / 0.09);
  --shadow-page:
    0 2px 6px oklch(0% 0 0 / 0.45),
    0 18px 50px -12px oklch(0% 0 0 / 0.5),
    0 60px 120px -30px oklch(0% 0 0 / 0.55);
  --shadow-float: 0 18px 50px -12px oklch(0% 0 0 / 0.6);
}

/* -------------------------------------------------------------- papier -- */
:root[data-theme="papier"] {
  color-scheme: light;

  --bg: oklch(96.5% 0.013 85);
  --bg-deep: oklch(93% 0.018 82);
  --text: oklch(27% 0.02 240);
  --muted: oklch(46% 0.022 235);
  --line: oklch(27% 0.02 240 / 0.14);

  --accent: oklch(45% 0.075 215);
  --accent-warm: oklch(58% 0.13 40);
  --accent-soft: oklch(45% 0.075 215 / 0.1);

  --btn-bg: oklch(99% 0.005 85 / 0.55);
  --btn-bg-hover: oklch(99% 0.005 85 / 0.92);
  --panel-bg: oklch(97.5% 0.01 85 / 0.95);

  --stage-light: oklch(40% 0.04 80 / 0.07);
  --shadow-page:
    0 1px 3px oklch(25% 0.02 240 / 0.2),
    0 16px 40px -14px oklch(25% 0.02 240 / 0.24),
    0 50px 100px -40px oklch(25% 0.02 240 / 0.28);
  --shadow-float: 0 18px 44px -16px oklch(25% 0.02 240 / 0.3);

  --grain-opacity: 0.035;
}

@media (max-width: 700px) {
  :root {
    --chrome-top: 56px;
    --chrome-bottom: 66px;
    --stage-pad: 10px;
  }
}