/* =============================================================
   tokens-stg.css — Design tokens STG v0.8
   Palette : STG-UI-002/tokens-premium.css (light neutral, lime accent).
   IMPORTANT: palette mise à jour 2026-05-23 — fini le café-au-lait.
   Chargé AVANT app.css / home.css dans index.php.
   ============================================================= */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --stg-paper:       #ffffff;          /* the white page */
  --stg-paper-2:     #fafaf7;          /* hover wash */
  --stg-paper-deep:  #f3f2ee;          /* sunken / card */
  --stg-surface:     #ffffff;          /* card body */
  --stg-surface-2:   #f7f6f1;
  --stg-cream:       #f3f2ee;
  --stg-shell:       #f3f2ee;

  /* Canvas profond (hero cover) */
  --stg-canvas-deep:   #2c5230;
  --stg-canvas-deep-2: #234127;

  /* ── Pop fills ────────────────────────────────────────────── */
  --stg-pop-mint:     #b8e6c9;
  --stg-pop-lime:     #d9f274;         /* accent rare — lime STG */
  --stg-pop-peach:    #f6c7b8;
  --stg-pop-sky:      #b9dee6;
  --stg-pop-lavender: #cbb9e0;
  --stg-pop-cream:    #f4ecd8;

  /* ── Ink ──────────────────────────────────────────────────── */
  --stg-ink:    #161a14;               /* deep ink */
  --stg-ink-2:  #38382f;
  --stg-ink-3:  #6b6b5f;
  --stg-ink-4:  #a6a59b;
  --stg-ink-on-deep:   #f4ecd8;
  --stg-ink-on-deep-2: #d9f274;        /* lime sur canvas profond */

  /* ── Règles / bordures (rares — premium = no borders) ────── */
  --stg-rule:        rgba(22,26,20,0.08);
  --stg-rule-soft:   rgba(22,26,20,0.05);
  --stg-border:      rgba(22,26,20,0.08);
  --stg-border-strong: rgba(22,26,20,0.16);

  /* ── Hover wash ───────────────────────────────────────────── */
  --stg-hover: rgba(22,26,20,0.06);

  /* ── Accent : lime (couleur rare, réservée) ───────────────── */
  --stg-accent:      #d9f274;          /* lime */
  --stg-accent-ink:  #161a14;
  --stg-accent-soft: #f0fadf;
  --stg-warm:        #a85630;          /* rouille — réservé erreurs/warm CTA */

  /* ── Status ───────────────────────────────────────────────── */
  --stg-danger:  #b44a3a;
  --stg-success: #3a7a4f;

  /* ── Focus ring ───────────────────────────────────────────── */
  --stg-focus:        #161a14;
  --stg-focus-offset: #ffffff;

  /* ── Radius — généreux, premium ──────────────────────────── */
  --stg-r-sm:   8px;    /* boutons petits, chips */
  --stg-r-md:   16px;   /* items sidebar, pills */
  --stg-r-lg:   24px;   /* cartes default */
  --stg-r-xl:   32px;   /* sidebar, blocs larges */
  --stg-r-2xl:  40px;   /* hero blocks */
  --stg-r-pill: 9999px;

  /* ── Spacing (8-based) ────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ── Ombre / lift ─────────────────────────────────────────── */
  --stg-lift:   0 1px 2px rgba(22,26,20,0.04), 0 6px 24px -8px rgba(22,26,20,0.08);
  --stg-lift-2: 0 2px 6px rgba(22,26,20,0.06), 0 20px 60px -16px rgba(22,26,20,0.16);

  /* ── Typographie ──────────────────────────────────────────── */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-ui:      "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Échelle typographique */
  --fs-hero:    clamp(2.5rem, 6vw, 6rem);
  --fs-h1:      clamp(2rem, 4vw, 3.5rem);
  --fs-h2:      2.25rem;    /* 36px */
  --fs-h3:      1.375rem;   /* 22px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body:    1rem;       /* 16px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-caption: 0.75rem;    /* 12px */

  --lh-display: 1.02;
  --lh-tight:   1.15;
  --lh-body:    1.55;

  /* ── Motion ───────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --ease:  cubic-bezier(.2,.6,.2,1);
}

/* =============================================================
   Dark mode — [data-theme="dark"] on <html>
   Toggle: themeController.mjs · Storage: localStorage stg_theme
   ============================================================= */
[data-theme="dark"] {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --stg-paper:       #12160f;
  --stg-paper-2:     #1a1e17;
  --stg-paper-deep:  #1f2419;
  --stg-surface:     #12160f;
  --stg-surface-2:   #1a1e17;
  --stg-cream:       #1f2419;
  --stg-shell:       #1f2419;

  /* Canvas profond — plus sombre en dark */
  --stg-canvas-deep:   #1a3320;
  --stg-canvas-deep-2: #12261a;

  /* ── Ink — inversé vers clair ─────────────────────────────── */
  --stg-ink:    #f0ebe0;
  --stg-ink-2:  #c8c3ad;
  --stg-ink-3:  #8a857a;
  --stg-ink-4:  #5a5850;
  --stg-ink-on-deep:   #f4ecd8;
  --stg-ink-on-deep-2: #d9f274;

  /* ── Règles / bordures ────────────────────────────────────── */
  --stg-rule:          rgba(240,235,224,0.10);
  --stg-rule-soft:     rgba(240,235,224,0.06);
  --stg-border:        rgba(240,235,224,0.10);
  --stg-border-strong: rgba(240,235,224,0.20);

  /* ── Hover wash ───────────────────────────────────────────── */
  --stg-hover: rgba(240,235,224,0.08);

  /* ── Accent : lime — reste tel quel sur fond sombre ──────── */
  --stg-accent:      #d9f274;
  --stg-accent-ink:  #161a14;
  --stg-accent-soft: #2a3a10;
  --stg-warm:        #e07850;

  /* ── Status ───────────────────────────────────────────────── */
  --stg-danger:  #e06050;
  --stg-success: #5aaa70;

  /* ── Focus ring — lime visible sur fond sombre ───────────── */
  --stg-focus:        #d9f274;
  --stg-focus-offset: #12160f;

  /* ── Ombres — renforcées sur fond sombre ─────────────────── */
  --stg-lift:   0 1px 2px rgba(0,0,0,0.24), 0 6px 24px -8px rgba(0,0,0,0.36);
  --stg-lift-2: 0 2px 6px rgba(0,0,0,0.28), 0 20px 60px -16px rgba(0,0,0,0.48);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}