/* ==========================================================================
   Design tokens — miroir de packages/dsm/theme
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Polices (packages/dsm/fonts) */
  --font-display: "Lilita One", Impact, "Arial Black", sans-serif;
  --font-comic: "Shantell Sans", "Comic Sans MS", cursive, sans-serif;
  --font-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* AppColors & AppGameColors.dark — thème unique « encre et papier » */
  --night: #18161f;
  --surface: #23202c;
  --surface-raised: #2f2b3a;
  --divider: #3a3647;
  --outline: #8c8496;
  --text: #fff6e6;
  --text-muted: #c9c0b0;
  --ink-soft: #524d57;
  --cta: #fff1d6;
  --on-cta: #18161f;
  --cta-edge: #d8c39c;
  --raised-edge: #100e15;
  --caption: #ffe7a3;
  --alert: #ff6b6b;
  --link: #4c9bff;

  /* AppLumenColors — puits et éléments (contraste arcade) */
  --well: #1b1e3a;
  --well-high-contrast: #0b0c1c;
  --well-grid: rgb(255 255 255 / 0.06);
  --well-rim: rgb(138 150 214 / 0.28);

  --fire-body: #ee4110;
  --fire-core: #ff8c7a;
  --fire-rim: #ff6a30;

  --water-body: #2f7bff;
  --water-core: #9ed8ff;

  --earth-body: #145236;
  --earth-core: #b6e36b;
  --earth-rim: #f2fff8;

  --air-body: #dce6ff;
  --air-core: #ffffff;

  --lightning-body: #ffd400;
  --lightning-core: #fff7a8;

  --soot-body: #8b7f97;
  --soot-core: #5f6070;
  --soot-rim: #b0a0d8;

  /* AppArenaPalette — fonds d'arène des cinq chapitres */
  --arena-greenhouse-top: #1f3028;
  --arena-greenhouse-bottom: #121c18;
  --arena-baths-top: #1a2b48;
  --arena-baths-bottom: #10192d;
  --arena-rooftop-top: #283050;
  --arena-rooftop-bottom: #181d33;
  --arena-forge-top: #3a1e1a;
  --arena-forge-bottom: #1f1110;
  --arena-pylon-top: #2e2440;
  --arena-pylon-bottom: #161224;

  /* AppSpacing — grille de 8 px */
  --space-xxs: 0.125rem; /* 2px */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-xxl: 3rem;     /* 48px */
  --space-xxxl: 4rem;    /* 64px */

  /* Cibles tactiles */
  --touch-min: 3rem;        /* 48px */
  --touch-comfort: 3.5rem;  /* 56px */

  /* AppRadii & AppComicMetrics */
  --radius-xs: 0.25rem;     /* 4px */
  --radius-sm: 0.5rem;      /* 8px — AppComicMetrics.panelRadius */
  --radius-md: 0.75rem;     /* 12px */
  --radius-lg: 1rem;        /* 16px — AppRadii.button */
  --radius-xl: 1.5rem;      /* 24px */
  --radius-pill: 999px;

  /* AppStrokes & AppComicMetrics */
  --stroke-hairline: 1px;
  --stroke-outline: 2px;    /* AppComicMetrics.buttonBorder */
  --stroke-comic: 3px;      /* AppComicMetrics.borderWidth */
  --stroke-grumble: 4px;    /* AppSpeechBubble.grumbles */

  /* AppShadows & AppComicMetrics */
  --shadow-panel: 6px 6px 0 var(--cta-edge);
  --shadow-caption: 4px 4px 0 var(--night);
  --shadow-button: 0 4px 12px rgb(0 0 0 / 0.25);
  --button-edge: 5px;
  --caption-tilt: -2deg;

  /* AppDurations & AppCurves */
  --dur-fast: 120ms;
  --dur-normal: 220ms;
  --dur-slow: 360ms;
  --dur-dramatic: 600ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Mise en page */
  --container-max: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}