/* ============================================================
   Artishoc · plume — Design tokens
   Source : src/shared/prerendered-app/colors.css
            src/shared/prerendered-app/Intro/style.css
   Copie conforme du design system plume (handoff filage) :
   ne pas modifier ici, surcharger dans style.css.
   ============================================================ */

:root {
  /* ─── Couleurs de marque ─────────────────────────────── */
  --color-primary: #080808; /* noir Artishoc */
  --color-secondary: #f3f3f3; /* gris clair */
  --color-accent: #f03b1d; /* rouge-orangé */
  --color-accent-dark: #c42e14; /* accent hover / foncé */
  --color-cream: rgb(187, 182, 169);
  --color-bg: #ffffff;
  --color-border: #f03b1d;
  --color-near-black: #080808;
  --color-off-black: #1d1d1d;

  /* ─── Gris ───────────────────────────────────────────── */
  --gray-900: #080808;
  --gray-800: #1d1d1d;
  --gray-700: #333333;
  --gray-500: #888888;
  --gray-400: #bcbcbc;
  --gray-300: #d1d1d1;
  --gray-200: #e8e8e8;
  --gray-100: #f3f3f3;
  --white: #ffffff;

  /* ─── Opacités de texte sur fond clair ───────────────── */
  --text-strong: #080808;
  --text-muted: rgba(8, 8, 8, 0.7);
  --text-soft: rgba(8, 8, 8, 0.55);
  --text-faint: rgba(8, 8, 8, 0.38);

  /* ─── Bordures ───────────────────────────────────────── */
  --border-subtle: rgba(8, 8, 8, 0.08);
  --border-light: rgba(8, 8, 8, 0.15);
  --border-medium: rgba(8, 8, 8, 0.25);
  --border-strong: rgba(8, 8, 8, 0.4);
  --border-frame: 10px solid var(--color-accent); /* cadre orange de l'app */

  /* ─── Accents secondaires (comparateur) ──────────────── */
  --blue: #5fb4e4;
  --dim-blue: #0a7bcc;

  /* ─── Typographie ────────────────────────────────────── */
  --font-display: 'Neue Haas Grotesk Display Pro', HelveticaNeue,
    'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-text: 'Neue Haas Grotesk Text Pro', HelveticaNeue, 'Helvetica Neue',
    Helvetica, system-ui, sans-serif;

  --fs-display: 180px; /* mot géant en filigrane */
  --fs-h1: 38px; /* titre de panneau éditeur */
  --fs-h2: 26px; /* titre zone de dépôt */
  --fs-h3: 22px; /* CTA / résultat */
  --fs-lg: 18px; /* libellé de section */
  --fs-md: 15px;
  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  --fw-light: 200;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-base: 1.3;
  --ls-tight: -0.02em;
  --ls-wide: 0.1em;

  /* ─── Rayons ─────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ─── Espacements ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ─── Élévations ─────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(8, 8, 8, 0.06);

  /* ─── Transitions ────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.18s;

  /* ─── Gabarits ───────────────────────────────────────── */
  --panel-width: 320px; /* panneau de réglages à droite */
  --topbar-height: 52px;
}