/* ===========================================================================
   Size It Up - socle de thème
   Jetons de conception, reset, typographie, halo de fond.
   Chargé avant css/app.css. Aucune règle d'interface ici.
   =========================================================================== */

/* --- Jetons : thème clair ------------------------------------------------ */
:root {
  --background: #f7f5f1;
  --foreground: #0e0f23;
  --card: #fdfbfa;
  --card-foreground: #0e0f23;
  --popover: #fdfbfa;
  --primary: #cc272e;
  --primary-foreground: #faf8f5;
  --secondary: #ece7e1;
  --secondary-foreground: #1e1f34;
  --muted: #ece7e1;
  --muted-foreground: #61626f;
  --accent: #cc272e;
  --accent-foreground: #faf8f5;
  --destructive: #e40014;
  --border: #dfd6c9;
  --input: #dfd6c9;
  --ring: #cc272e;
  --chart-1: #cc272e;
  --chart-2: #009588;
  --chart-3: #104e64;
  --chart-4: #fcbb00;
  --chart-5: #f99c00;
  --radius: .75rem;
  --success: #008a48;
  --success-foreground: #faf8f5;

  /* Bord du plateau et teintes chaudes des commandes posées sur le canvas. */
  --board-border: #cfb49c;
  --board-control-border: #ccb197;
  --board-control-bg: #fff8ef;
  --board-control-hover: #f3e4d2;
  --board-control-fg: #6f3b25;
  --board-overlay-bg: rgba(255, 250, 244, .7);
  --board-overlay-points: #ab341f;
  --board-overlay-text: #4f291c;
  --board-overlay-dim: #6f3b25;
  --board-overlay-shadow:
    -1px -1px 0 rgba(255, 250, 244, .98),
    1px -1px 0 rgba(255, 250, 244, .98),
    -1px 1px 0 rgba(255, 250, 244, .98),
    1px 1px 0 rgba(255, 250, 244, .98),
    0 3px 7px rgba(74, 39, 24, .35);

  /* Teintes ambre des encarts d'alerte. */
  --notice-border: rgba(251, 191, 36, .45);
  --notice-bg: rgba(255, 251, 235, .6);
  --notice-fg: #451a03;

  /* Bleu de la référence, repris dans l'illustration de la modale. */
  --reference-ink: #1e3a8a;

  color-scheme: light;
}

/* --- Jetons : thème sombre ----------------------------------------------- */
.dark {
  --background: #0b0c16;
  --foreground: #f0eeeb;
  --card: #14151f;
  --card-foreground: #f0eeeb;
  --popover: #14151f;
  --primary: #f14d4c;
  --primary-foreground: #090a13;
  --secondary: #20212b;
  --secondary-foreground: #f0eeeb;
  --muted: #20212b;
  --muted-foreground: #8c8e9c;
  --accent: #f14d4c;
  --accent-foreground: #090a13;
  --destructive: #82181a;
  --border: #2c2d38;
  --input: #2c2d38;
  --ring: #f14d4c;
  --chart-1: #f14d4c;
  --chart-2: #00bb7f;
  --chart-3: #f99c00;
  --chart-4: #ac4bff;
  --chart-5: #ff2357;
  --success: #00ab60;
  --success-foreground: #090a13;

  --board-border: rgba(30, 41, 59, .9);
  --board-control-border: rgba(255, 255, 255, .15);
  --board-control-bg: rgba(2, 6, 23, .75);
  --board-control-hover: #0f172a;
  --board-control-fg: #cbd5e1;
  --board-overlay-bg: rgba(2, 6, 23, .55);
  --board-overlay-points: #fcd34d;
  --board-overlay-text: #f1f5f9;
  --board-overlay-dim: #cbd5e1;
  --board-overlay-shadow:
    -1px -1px 0 rgba(2, 6, 23, .95),
    1px -1px 0 rgba(2, 6, 23, .95),
    -1px 1px 0 rgba(2, 6, 23, .95),
    1px 1px 0 rgba(2, 6, 23, .95),
    0 3px 7px rgba(2, 6, 23, .9);

  --notice-border: rgba(245, 158, 11, .35);
  --notice-bg: rgba(69, 26, 3, .2);
  --notice-fg: #fef3c7;

  --reference-ink: #60a5fa;

  color-scheme: dark;
}

/* Tant que le script de thème n'a pas posé sa classe, on suit le système. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --background: #0b0c16;
    --foreground: #f0eeeb;
    --card: #14151f;
    --card-foreground: #f0eeeb;
    --popover: #14151f;
    --primary: #f14d4c;
    --primary-foreground: #090a13;
    --secondary: #20212b;
    --secondary-foreground: #f0eeeb;
    --muted: #20212b;
    --muted-foreground: #8c8e9c;
    --accent: #f14d4c;
    --accent-foreground: #090a13;
    --destructive: #82181a;
    --border: #2c2d38;
    --input: #2c2d38;
    --ring: #f14d4c;
    --chart-1: #f14d4c;
    --chart-2: #00bb7f;
    --chart-3: #f99c00;
    --chart-4: #ac4bff;
    --chart-5: #ff2357;
    --success: #00ab60;
    --success-foreground: #090a13;

    --board-border: rgba(30, 41, 59, .9);
    --board-control-border: rgba(255, 255, 255, .15);
    --board-control-bg: rgba(2, 6, 23, .75);
    --board-control-hover: #0f172a;
    --board-control-fg: #cbd5e1;
    --board-overlay-bg: rgba(2, 6, 23, .55);
    --board-overlay-points: #fcd34d;
    --board-overlay-text: #f1f5f9;
    --board-overlay-dim: #cbd5e1;
    --board-overlay-shadow:
      -1px -1px 0 rgba(2, 6, 23, .95),
      1px -1px 0 rgba(2, 6, 23, .95),
      -1px 1px 0 rgba(2, 6, 23, .95),
      1px 1px 0 rgba(2, 6, 23, .95),
      0 3px 7px rgba(2, 6, 23, .9);

    --notice-border: rgba(245, 158, 11, .35);
    --notice-bg: rgba(69, 26, 3, .2);
    --notice-fg: #fef3c7;

    --reference-ink: #60a5fa;

    color-scheme: dark;
  }
}

/* --- Jetons dérivés : rayons, ombres, mouvement -------------------------- */
:root {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-pill: 999px;

  /* Ombres reprises telles quelles de l'original. */
  --shadow-round-btn: 0 10px 28px rgba(28, 22, 18, .14);
  --shadow-logo-btn: 0 10px 28px color-mix(in oklab, var(--primary) 28%, transparent);
  --shadow-primary-btn: 0 10px 22px rgba(171, 52, 40, .24);
  --shadow-share-btn: 0 10px 24px rgba(171, 52, 40, .2);
  --shadow-modal: 0 22px 45px rgba(27, 22, 18, .18);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow-bar-glow: 0 0 16px rgba(171, 52, 40, .24);
  --shadow-guide-line: 0 7px 16px rgba(171, 52, 40, .14);
  --shadow-die: 0 8px 18px rgba(30, 58, 138, .2);
  --shadow-illus-block: 0 14px 25px rgba(171, 52, 40, .2);

  /* Typographie. */
  --font-sans: "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: SFMono-Regular, "Cascadia Mono", Menlo, monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;
  --fs-h1: 1.5rem;
  --fs-h1-md: 1.8rem;

  /* Mouvement. */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  --dur-drawer: 220ms;
  --dur-reveal: 700ms;
  --dur-bar: 1000ms;
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Halo radial du fond, hors flux et sous tout le contenu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image:
    radial-gradient(52rem 27rem at 50% -12%, rgba(170, 51, 42, .11), transparent 72%),
    radial-gradient(30rem 18rem at 14% 8%, rgba(120, 78, 53, .1), transparent 72%);
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: color-mix(in oklab, var(--primary) 22%, transparent);
}

/* --- Utilitaires de texte ------------------------------------------------ */
.mono-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-foreground);
}

.mono-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* --- Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}