/* BizNC Premium — jetons du design system (lot 1).
   Source unique pour l'app premium.biznc.nc et, plus tard, la landing
   biznc.nc/premium. Sombre par défaut ; clair via data-theme="light" ou, sans
   choix mémorisé, via la préférence système. Documentation :
   docs/premium-design-system.md. */

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-variable-opsz-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs, thème sombre : noir adouci, anthracite, blanc crème. */
  --pm-bg: #131312;
  --pm-surface: #1b1b19;
  --pm-surface-2: #242421;
  --pm-surface-3: #2d2d29;
  --pm-line: #2f2f2b;
  --pm-line-strong: #45453f;
  --pm-fg: #f3efe6;          /* 16,2:1 sur --pm-bg */
  --pm-fg-2: #c9c4b8;
  --pm-muted: #a29e93;       /* 6,9:1 sur --pm-bg, 6,4:1 sur --pm-surface */
  --pm-accent: #7fd6c9;      /* lagon : informations utiles seulement */
  --pm-accent-soft: rgba(127, 214, 201, 0.12);
  --pm-on-accent: #0d2a26;
  --pm-inverse: #f3efe6;     /* bouton primaire */
  --pm-on-inverse: #131312;
  --pm-ok: #8fd19e;
  --pm-warn: #e9b872;
  --pm-bad: #ef8f86;
  --pm-scrim: rgba(8, 8, 7, 0.6);
  --pm-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);

  /* Typographie : Inter variable, optique Display automatique en grand corps. */
  --pm-font: "Inter Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pm-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Échelle application */
  --pm-text-xs: 12px;
  --pm-text-sm: 13px;
  --pm-text-md: 15px;
  --pm-text-lg: 18px;
  --pm-text-xl: 24px;
  /* Échelle landing */
  --pm-display-sm: clamp(28px, 4vw, 40px);
  --pm-display-md: clamp(36px, 6vw, 64px);
  --pm-display-lg: clamp(44px, 9vw, 96px);
  --pm-leading-text: 1.45;
  --pm-leading-title: 1.1;
  --pm-leading-display: 0.92;
  --pm-tracking-display: -0.045em;

  /* Espacements (base 4) */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 20px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;

  /* Rayons : hiérarchie par taille, pilules réservées aux tags et puces. */
  --pm-radius-xs: 8px;    /* case à cocher, petits éléments */
  --pm-radius-sm: 14px;   /* boutons à texte, champs */
  --pm-radius-md: 16px;   /* menus, popovers */
  --pm-radius-lg: 20px;   /* cartes */
  --pm-radius-xl: 28px;   /* panneaux, modales, feuilles */
  --pm-radius-2xl: 36px;  /* captures, conteneurs de landing */
  --pm-radius-pill: 999px;

  /* Tailles */
  --pm-hit: 44px;         /* zone tactile minimale */
  --pm-control-h: 44px;
  --pm-control-h-sm: 36px;
  --pm-icon: 20px;
  --pm-icon-sm: 16px;

  /* Mouvement : sert à expliquer un changement d'état. */
  --pm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pm-dur-fast: 120ms;
  --pm-dur: 200ms;
  --pm-dur-slow: 280ms;
  --pm-tooltip-delay: 400ms;

  --pm-focus: var(--pm-fg);
  color-scheme: dark;
}

/* Thème clair : blanc crème, texte noir, surfaces légèrement différenciées.
   Appliqué par choix mémorisé, ou par la préférence système sans choix. */
:root[data-theme="light"] {
  --pm-bg: #f7f4ec;
  --pm-surface: #efebe1;
  --pm-surface-2: #e6e1d4;
  --pm-surface-3: #ddd7c8;
  --pm-line: #ddd7c8;
  --pm-line-strong: #c4bdab;
  --pm-fg: #151513;
  --pm-fg-2: #3a3833;
  --pm-muted: #5f5b52;       /* 6,2:1 sur --pm-bg, 5,7:1 sur --pm-surface */
  --pm-accent: #0e6f66;      /* 5,5:1 sur --pm-bg */
  --pm-accent-soft: rgba(14, 111, 102, 0.1);
  --pm-on-accent: #e6f6f3;
  --pm-inverse: #151513;
  --pm-on-inverse: #f7f4ec;
  --pm-ok: #2d6b3a;
  --pm-warn: #8a5a10;
  --pm-bad: #a3352b;
  --pm-scrim: rgba(21, 21, 19, 0.35);
  --pm-shadow: 0 12px 32px rgba(40, 34, 20, 0.14), 0 2px 6px rgba(40, 34, 20, 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pm-bg: #f7f4ec;
    --pm-surface: #efebe1;
    --pm-surface-2: #e6e1d4;
    --pm-surface-3: #ddd7c8;
    --pm-line: #ddd7c8;
    --pm-line-strong: #c4bdab;
    --pm-fg: #151513;
    --pm-fg-2: #3a3833;
    --pm-muted: #5f5b52;
    --pm-accent: #0e6f66;
    --pm-accent-soft: rgba(14, 111, 102, 0.1);
    --pm-on-accent: #e6f6f3;
    --pm-inverse: #151513;
    --pm-on-inverse: #f7f4ec;
    --pm-ok: #2d6b3a;
    --pm-warn: #8a5a10;
    --pm-bad: #a3352b;
    --pm-scrim: rgba(21, 21, 19, 0.35);
    --pm-shadow: 0 12px 32px rgba(40, 34, 20, 0.14), 0 2px 6px rgba(40, 34, 20, 0.08);
    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pm-dur-fast: 0ms;
    --pm-dur: 0ms;
    --pm-dur-slow: 0ms;
  }
}