/**
 * Thèmes SebFitLab — couleurs HSL pour Tailwind (hsl(var(--c-*) / alpha))
 * color-scheme est défini **par thème** (pas sur html seul) pour que « Clair »
 * applique bien les contrôles natifs clairs sous Safari / Firefox.
 */
/* Défaut si aucun thème (FOUC) */
html:not([data-theme]) {
  color-scheme: dark;
  --c-page: 222 47% 7%;
  --c-surface: 217 33% 12%;
  --c-elevated: 217 33% 17%;
  --c-ink: 210 40% 98%;
  --c-soft: 215 20% 85%;
  --c-muted: 215 18% 68%;
  --c-faint: 215 15% 54%;
  --c-accent: 160 84% 39%;
  --c-accent-hover: 160 84% 48%;
  --c-line: 217 19% 24%;
  --c-field: 222 47% 9%;
  --c-on-accent: 0 0% 100%;
  --c-header-bg: 217 33% 11%;
  --c-warn: 38 92% 52%;
  --c-ok:   142 71% 45%;
  --c-err:  0 84% 60%;
}

html[data-theme="emerald"] {
  color-scheme: dark;
  --c-page: 222 47% 7%;
  --c-surface: 217 33% 12%;
  --c-elevated: 217 33% 17%;
  --c-ink: 210 40% 98%;
  --c-soft: 215 20% 85%;
  --c-muted: 215 18% 68%;
  --c-faint: 215 15% 54%;
  --c-accent: 160 84% 39%;
  --c-accent-hover: 160 84% 48%;
  --c-line: 217 19% 24%;
  --c-field: 222 47% 9%;
  --c-on-accent: 0 0% 100%;
  --c-header-bg: 217 33% 11%;
  --c-warn: 38 92% 52%;
  --c-ok:   142 71% 45%;
  --c-err:  0 84% 60%;
}

html[data-theme="ocean"] {
  color-scheme: dark;
  --c-page: 210 45% 8%;
  --c-surface: 210 40% 13%;
  --c-elevated: 210 38% 17%;
  --c-ink: 195 50% 98%;
  --c-soft: 200 25% 85%;
  --c-muted: 205 20% 70%;
  --c-faint: 205 16% 56%;
  --c-accent: 190 90% 42%;
  --c-accent-hover: 190 90% 50%;
  --c-line: 210 28% 22%;
  --c-field: 210 45% 10%;
  --c-on-accent: 0 0% 100%;
  --c-header-bg: 210 40% 11%;
  --c-warn: 38 92% 52%;
  --c-ok:   142 71% 45%;
  --c-err:  0 84% 60%;
}

html[data-theme="violet"] {
  color-scheme: dark;
  --c-page: 260 40% 8%;
  --c-surface: 260 35% 13%;
  --c-elevated: 260 32% 18%;
  --c-ink: 270 40% 98%;
  --c-soft: 265 20% 86%;
  --c-muted: 265 18% 70%;
  --c-faint: 265 15% 56%;
  --c-accent: 265 85% 62%;
  --c-accent-hover: 265 85% 70%;
  --c-line: 260 25% 24%;
  --c-field: 260 40% 10%;
  --c-on-accent: 260 40% 8%;
  --c-header-bg: 260 35% 11%;
  --c-warn: 38 92% 52%;
  --c-ok:   142 71% 45%;
  --c-err:  0 84% 60%;
}

html[data-theme="amber"] {
  color-scheme: dark;
  --c-page: 28 22% 8%;
  --c-surface: 28 20% 12%;
  --c-elevated: 28 18% 16%;
  --c-ink: 40 30% 97%;
  --c-soft: 35 20% 84%;
  --c-muted: 32 16% 68%;
  --c-faint: 30 13% 54%;
  --c-accent: 38 92% 50%;
  --c-accent-hover: 38 95% 56%;
  --c-line: 28 18% 22%;
  --c-field: 28 22% 10%;
  --c-on-accent: 28 30% 12%;
  --c-header-bg: 28 20% 11%;
  --c-warn: 38 92% 56%;
  --c-ok:   142 71% 45%;
  --c-err:  0 84% 60%;
}

html[data-theme="light"] {
  color-scheme: light;
  --c-page: 220 18% 96%;
  --c-surface: 220 16% 100%;
  --c-elevated: 220 14% 93%;
  --c-ink: 222 52% 6%;       /* max contrast on light */
  --c-soft: 220 22% 16%;
  --c-muted: 220 16% 26%;    /* WCAG AA ~8:1 on light bg */
  --c-faint: 220 13% 36%;    /* WCAG AA ~5.5:1 on light bg */
  --c-accent: 160 72% 26%;   /* darker green — readable on white */
  --c-accent-hover: 160 72% 20%;
  --c-line: 220 14% 82%;
  --c-field: 220 18% 99%;
  --c-on-accent: 0 0% 100%;
  --c-header-bg: 220 16% 99%;
  --c-warn: 32 80% 26%;      /* dark amber — WCAG AA on white */
  --c-ok:   142 65% 23%;     /* dark green — WCAG AA on white */
  --c-err:  0 72% 32%;       /* dark red — WCAG AA on white */
}

html[data-theme="sepia"] {
  color-scheme: light;
  --c-page: 38 32% 92%;       /* parchemin chaud */
  --c-surface: 38 28% 97%;
  --c-elevated: 38 26% 87%;
  --c-ink: 28 52% 7%;         /* brun foncé max contraste */
  --c-soft: 28 28% 16%;
  --c-muted: 28 22% 24%;      /* WCAG AA ~9:1 sur beige */
  --c-faint: 28 18% 34%;      /* WCAG AA ~5.5:1 sur beige */
  --c-accent: 22 70% 30%;     /* terracotta chaud */
  --c-accent-hover: 22 72% 24%;
  --c-line: 35 22% 76%;
  --c-field: 38 28% 95%;
  --c-on-accent: 0 0% 100%;
  --c-header-bg: 38 26% 95%;
  --c-warn: 26 68% 24%;       /* terracotta foncé — WCAG AA sur beige */
  --c-ok:   130 50% 22%;      /* vert foncé — WCAG AA sur beige */
  --c-err:  0 65% 28%;        /* rouge foncé — WCAG AA sur beige */
}

html[data-theme="contrast"] {
  color-scheme: dark;
  --c-page: 0 0% 0%;
  --c-surface: 0 0% 8%;
  --c-elevated: 0 0% 12%;
  --c-ink: 0 0% 100%;
  --c-soft: 0 0% 95%;
  --c-muted: 0 0% 84%;
  --c-faint: 0 0% 72%;
  --c-accent: 48 100% 50%;
  --c-accent-hover: 48 100% 58%;
  --c-line: 0 0% 35%;
  --c-field: 0 0% 5%;
  --c-on-accent: 0 0% 0%;
  --c-header-bg: 0 0% 6%;
  --c-warn: 48 100% 58%;
  --c-ok:   120 100% 55%;
  --c-err:  0 100% 62%;
}

/*
 * Coque visuelle de secours : s’applique dès changement de data-theme,
 * même si le CDN Tailwind est bloqué, en retard ou n’émet pas les utilitaires.
 */
html[data-theme] body {
  background-color: hsl(var(--c-page));
  color: hsl(var(--c-ink));
}

html[data-theme] body > header {
  background-color: hsl(var(--c-surface) / 0.88);
  border-bottom-color: hsl(var(--c-line) / 0.9);
  box-shadow: 0 1px 0 0 hsl(var(--c-line) / 0.35);
}

@supports (backdrop-filter: blur(12px)) {
  html[data-theme] body > header {
    background-color: hsl(var(--c-surface) / 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

html[data-theme] body > main {
  color: hsl(var(--c-ink));
}

html[data-theme] body > footer {
  border-top-color: hsl(var(--c-line) / 0.8);
  color: hsl(var(--c-faint));
}

/* Titres et paragraphes du contenu si classes Tailwind absentes */
html[data-theme] main h1,
html[data-theme] main h2,
html[data-theme] main h3 {
  color: hsl(var(--c-ink));
}

/* Page capture (pas de <header>, seulement <nav>) */
html[data-theme] body > nav {
  background-color: hsl(var(--c-surface) / 0.88);
  border-bottom-color: hsl(var(--c-line));
}

/* ── Taille du texte ── */
html[data-fontsize="sm"] { font-size: 14px; }
html[data-fontsize="md"] { font-size: 16px; }
html[data-fontsize="lg"] { font-size: 18px; }
html[data-fontsize="xl"] { font-size: 20px; }

/* Bouton taille active */
.js-fontsize-btn[data-active="true"] {
  background-color: hsl(var(--c-accent) / 0.15);
  color: hsl(var(--c-accent));
  border-color: hsl(var(--c-accent) / 0.4);
}