/* ============================================================
   GENIALLY V2 — DESIGN TOKENS
   Source : KUT design system v1.7.20 (template-pdh.php / kut-shared-styles.php)
   Tokens aliasés en noms simulation-friendly (--c-*, --fs-*, --sp-*)
   ============================================================ */

:root {
  /* ----- Colors — KUT canonical ----- */
  --c-bg: #ffffff;                 /* kut-bg-white */
  --c-surface: #f8fbfd;            /* kut-bg-alt — used for hint bubble, quiz illustration bg */
  --c-surface-soft: #fcfdfe;       /* kut-bg-soft */
  --c-page: #f4f7f9;               /* kut-bg-page */

  --c-ink: #243b53;                /* kut-text-primary (navy) */
  --c-ink-soft: #52606d;           /* kut-text-secondary */
  --c-ink-muted: #829ab1;          /* kut-text-muted */

  --c-action: #2d985e;             /* kut-green — progress bar, highlight ring, decorative */
  --c-action-btn: #236a4a;         /* kut-green-a11y — btn-primary background: white on this = 5.44:1 (AA pass) */
  --c-action-dark: #1c5439;        /* kut-green-dark — btn hover (deepened to keep step ratio) */
  --c-action-soft: #eef8f2;        /* kut-green-light — bubble bg if needed */
  --c-action-ink: #ffffff;         /* on-action text */

  --c-warn: #eab308;               /* kut-accent-gold-dark — used as warn (no dedicated warn token in KUT) */
  --c-error: #d24e3d;              /* NET-NEW : KUT n'a pas de token error explicite, on garde un rouge soft cohérent avec la palette */

  --c-border: #e6ecef;             /* kut-border */
  --c-border-soft: #f1f5f9;        /* kut-border-soft */

  /* ----- Step accent colors (process map 5 cercles) ----- */
  /* NET-NEW : KUT n'a pas de step-color scale. Inventé pour le composant overview.
     Choisis pour être distincts entre eux et harmoniser avec la palette KUT. */
  --c-step-1: #2d985e;             /* vert KUT (le primaire — premier pas, départ) */
  --c-step-2: #2a6fb3;             /* kut-info — bleu */
  --c-step-3: #eab308;             /* gold-dark — étape pivot */
  --c-step-4: #7c4dff;             /* violet — net-new */
  --c-step-5: #d24e3d;             /* rouge soft (= c-error) — étape finale, sauvegarde */

  /* ----- Typography ----- */
  /* KUT impose Inter en font unique (pas de display secondaire). On garde la même règle. */
  --font-display: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;                   /* kut-body-size */
  --fs-lg: 21px;                   /* kut-h4-size */
  --fs-xl: 28px;                   /* aligned with mobile h2-size — works as scene title */
  --fs-2xl: 40px;                  /* approx kut-h1 mobile, smaller than 52px desktop pour rester compact dans iframe */

  --lh-tight: 1.18;                /* kut-h2-lh */
  --lh-body: 1.55;                 /* slightly tighter than kut-body 1.65 for iframe density */

  /* ----- Spacing (4pt grid, KUT canonical) ----- */
  --sp-1: 4px;                     /* s-4 */
  --sp-2: 8px;                     /* s-8 */
  --sp-3: 12px;                    /* s-12 */
  --sp-4: 16px;                    /* s-16 */
  --sp-6: 24px;                    /* s-24 */
  --sp-8: 32px;                    /* s-32 */
  --sp-12: 48px;                   /* s-48 */
  --sp-16: 64px;                   /* s-64 */

  /* ----- Radii ----- */
  --r-sm: 6px;                     /* r-6 */
  --r-md: 10px;                    /* r-10 — boutons KUT, primary radius */
  --r-lg: 18px;                    /* r-18 — modales, cards */
  --r-xl: 24px;                    /* r-24 — hero blocks */
  --r-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);   /* kut-shadow-md — cards */
  --shadow-pop:  0 24px 50px rgba(0, 0, 0, 0.18);      /* kut-shadow-lg — modales, popups */
  --shadow-action: 0 10px 20px rgba(45, 152, 94, 0.25); /* kut-shadow-green — btn primary */

  /* ----- Motion ----- */
  --dur-fast: 120ms;               /* motion-fast */
  --dur-base: 220ms;               /* motion-base */
  --dur-slow: 400ms;               /* motion-slow */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);       /* canonical */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* canonical */

  /* ----- Breakpoints (reference only — must inline in @media queries) -----
     --bp-mobile:  480px
     --bp-tablet:  768px
     --bp-desktop: 1120px (max simu width)
  */
}

/* Dark mode — KUT canonical mapping.
   Activated by [data-theme="dark"] on the parent (WordPress page sets this).
   In iframe context, we inherit by reading parent's preference at boot if needed. */
[data-theme="dark"] {
  --c-bg: #0f1f2e;
  --c-surface: #132839;
  --c-surface-soft: #0d1d2c;
  --c-page: #07111c;

  --c-ink: #e6ecef;
  --c-ink-soft: #a5b4c4;
  --c-ink-muted: #6d8296;

  --c-action: #3bbf76;
  --c-action-dark: #2d985e;
  --c-action-soft: rgba(59, 191, 118, 0.12);
  --c-action-ink: #07111c;

  --c-border: #22364b;
  --c-border-soft: #1a2d3f;

  --shadow-soft: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(59, 191, 118, 0.05);
  --shadow-pop:  inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 40px -10px rgba(59, 191, 118, 0.18);
  --shadow-action: 0 10px 20px rgba(59, 191, 118, 0.15);
}

/* Mobile typography downshift, KUT canonical pattern */
@media (max-width: 768px) {
  :root {
    --fs-2xl: 32px;
    --fs-xl: 22px;
    --fs-lg: 18px;
    --fs-md: 15px;
  }
}