/* ==========================================================================
   Design tokens.

   Registre « produit développeur » (Vercel, Node.js, Tiptap) :
   base monochrome, un seul accent, bordures d'un pixel plutôt que des ombres,
   rayons courts, sans-serif à interlettrage serré, beaucoup de blanc.

   Le thème suit le réglage de l'appareil : pas de bascule, donc pas d'état à
   désynchroniser.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Échelle de gris — c'est elle qui porte tout le design */
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-muted: #f4f4f5;
  --surface: #ffffff;

  --border: #eaeaea;
  --border-strong: #d4d4d8;

  --fg: #0a0a0a;
  --fg-secondary: #52525b;
  --fg-muted: #8f8f96;
  --fg-onDark: #ffffff;

  /* Accent unique */
  --accent: #0d8a63;
  --accent-hover: #0a6e4f;
  --accent-subtle: #edfaf4;
  --accent-border: #a8e0cb;

  /* Sémantique, dans la même retenue */
  --warn: #a4620a;
  --warn-subtle: #fdf6e9;
  --warn-border: #f0d9a8;
  --danger: #c2261b;
  --danger-subtle: #fdf0ef;

  /* Typographie */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               "Segoe UI Mono", "Roboto Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-display: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --fs-price: 1.375rem;

  /* Interlettrage serré sur les titres, comme dans ces produits */
  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --ls-label: 0.02em;

  /* Rythme sur 4 px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3.5rem;
  --sp-16: 5rem;

  /* Rayons courts */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 999px;

  /* Élévation : discrète, la bordure fait l'essentiel */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 5%), 0 4px 12px -4px rgb(0 0 0 / 6%);
  --shadow-lg: 0 8px 32px -8px rgb(0 0 0 / 12%);

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);

  --header-h: 56px;
  --content-max: 68rem;
  --measure: 42rem;
}

/* --- Thème sombre, piloté par l'appareil seul ---------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-subtle: #0a0a0a;
    --bg-muted: #161618;
    --surface: #0a0a0a;

    --border: #232326;
    --border-strong: #34343a;

    --fg: #ededed;
    --fg-secondary: #a1a1a8;
    --fg-muted: #6e6e78;
    --fg-onDark: #0a0a0a;

    --accent: #2ecfa0;
    --accent-hover: #57dcb4;
    --accent-subtle: #0c211a;
    --accent-border: #1c4a3a;

    --warn: #e0b063;
    --warn-subtle: #1f1809;
    --warn-border: #4a3a15;
    --danger: #f97066;
    --danger-subtle: #240f0d;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 45%), 0 4px 12px -4px rgb(0 0 0 / 50%);
    --shadow-lg: 0 8px 32px -8px rgb(0 0 0 / 70%);

    --ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}