/* GÉNÉRÉ par tools/generate-tokens.js à partir de design-tokens.json. Ne pas modifier à la main. */
:root {
  --color-bg: #f5f5f7;
  --color-card-solid: #ffffff;
  --color-card: rgba(255, 255, 255, 0.72);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-text: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #9a9aa0;
  --color-fill-subtle: rgba(0, 0, 0, 0.035);
  --color-fill-field: rgba(0, 0, 0, 0.02);
  --color-fill-secondary: rgba(0, 0, 0, 0.05);
  --color-fill-secondary-hover: rgba(0, 0, 0, 0.08);
  --color-accent: #0071e3;
  --color-accent-hover: #005fbf;
  --color-accent-text: #0071e3;
  --color-accent-contrast: #ffffff;
  --accent-rgb: 0, 113, 227;
  --color-accent-soft: rgba(var(--accent-rgb), 0.1);
  --color-danger: #ff3b30;
  --color-danger-hover: #d70015;
  --color-danger-soft: rgba(255, 59, 48, 0.1);
  --color-danger-chip: rgba(255, 59, 48, 0.12);
  --color-switch-track: rgba(0, 0, 0, 0.18);
  --color-ring: rgba(0, 0, 0, 0.15);
  --color-success: #34c759;
  --color-warning-bg: rgba(255, 149, 0, 0.12);
  --color-warning-border: rgba(255, 149, 0, 0.35);
  --color-blob-danger: rgba(255, 59, 48, 0.22);
  --color-blob-indigo: rgba(88, 86, 214, 0.28);
  --glass-saturate: 180%;
  --radius-lg: 20px;
  --radius-panel: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-quote: 4px;
  --radius-pill: 980px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.07);
  --shadow-card-lg: 0 16px 50px rgba(0, 0, 0, 0.14);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.035);
  --shadow-pill: 0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-pill-hover: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-switch-thumb: 0 1px 3px rgba(0, 0, 0, 0.3);
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --col-main: 560px;
  --col-side: 300px;
  --col-gap: 28px;
  --side-pad: 18px;
  --motion-fast: 0.15s ease;
  --motion-press: 0.05s ease;
  --motion-switch: 0.2s ease;
  --motion-move: 0.25s ease;
  --glass-card-bg: rgba(255, 255, 255, 0.72);
  --glass-card-opaque: #fcfcfd;
  --glass-card-blur: 20px;
  --glass-card-border: rgba(0, 0, 0, 0.08);
  --glass-card-radius: 20px;
  --glass-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  --glass-soft-bg: rgba(255, 255, 255, 0.34);
  --glass-soft-opaque: #f8f8fa;
  --glass-soft-blur: 20px;
  --glass-soft-border: rgba(255, 255, 255, 0.55);
  --glass-soft-radius: 20px;
  --glass-soft-shadow: 0 4px 18px rgba(0, 0, 0, 0.035);
  --glass-pill-bg: rgba(255, 255, 255, 0.82);
  --glass-pill-opaque: #fdfdfe;
  --glass-pill-blur: 16px;
  --glass-pill-border: rgba(0, 0, 0, 0.08);
  --glass-pill-radius: 980px;
  --glass-pill-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  --glass-panel-bg: rgba(255, 255, 255, 0.92);
  --glass-panel-opaque: #fefefe;
  --glass-panel-blur: 20px;
  --glass-panel-border: rgba(0, 0, 0, 0.08);
  --glass-panel-radius: 16px;
  --glass-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Verre : une classe par niveau. */
.kf-glass-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-card-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--glass-card-radius);
  box-shadow: var(--glass-card-shadow);
}

.kf-glass-soft {
  background: var(--glass-soft-bg);
  backdrop-filter: blur(var(--glass-soft-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-soft-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-soft-border);
  border-radius: var(--glass-soft-radius);
  box-shadow: var(--glass-soft-shadow);
}

.kf-glass-pill {
  background: var(--glass-pill-bg);
  backdrop-filter: blur(var(--glass-pill-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-pill-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-pill-border);
  border-radius: var(--glass-pill-radius);
  box-shadow: var(--glass-pill-shadow);
}

.kf-glass-panel {
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: var(--glass-panel-shadow);
}

/* Repli opaque : navigateur sans backdrop-filter, préférence système 'réduire la transparence'
   (là où elle est supportée), ou classe .kf-no-blur posée sur <html> pour forcer et tester. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kf-glass-card { background: var(--glass-card-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-soft { background: var(--glass-soft-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-pill { background: var(--glass-pill-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-panel { background: var(--glass-panel-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kf-glass-card { background: var(--glass-card-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-soft { background: var(--glass-soft-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-pill { background: var(--glass-pill-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kf-glass-panel { background: var(--glass-panel-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.kf-no-blur .kf-glass-card { background: var(--glass-card-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kf-no-blur .kf-glass-soft { background: var(--glass-soft-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kf-no-blur .kf-glass-pill { background: var(--glass-pill-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kf-no-blur .kf-glass-panel { background: var(--glass-panel-opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }