/* === IA LANDMARK: BASE (VARIABLES, TOKENS, RESETS) === */
/* Google Fonts - Inter & JetBrains Mono
 * NOTE: @import removed for performance (render-blocking).
 * Fonts are now loaded via <link rel="preconnect"> + <link rel="stylesheet"> in header.ejs
 */

/* ===================================
   CSS HOUDINI — @property Declarations
   Deep Ether v7: Typed custom properties
   for animatable gradient parameters.
   Browsers without support get static fallback.
   =================================== */
@property --ether-glow-opacity {
  syntax: "<number>";
  initial-value: 0.07;
  inherits: false;
}

@property --ether-glow-x {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

:root {
  /* ===================================
       DESIGN TOKENS - Industrial Pro 2026
       =================================== */

  /* === FONT FAMILY TOKENS === */
  --font-family-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-family-mono:
    "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", monospace;

  /* === SPACING SCALE (8pt Grid) === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === TYPOGRAPHY SCALE === */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px */
  --text-base: 0.875rem;
  /* 14px */
  --text-lg: 1rem;
  /* 16px */
  --text-xl: 1.125rem;
  /* 18px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 2rem;
  /* 32px */
  --text-4xl: 2.5rem;
  /* 40px */

  /* === FONT WEIGHTS === */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* === TRANSITIONS === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* v8.1: New 2025 easings */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* iOS system deceleration */
  --ease-haptic: cubic-bezier(0.2, 0, 0, 1);
  /* Sharp press-down */

  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* === SAFE AREAS (iOS/Android) === */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* === Z-INDEX LAYERS === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 10000;
  --z-max: 9999;

  /* === Pear OS Light Edition Palette (Organic Ceramic v9) === */
  --bg-body: #f9f8f6;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f3f2ee;
  --bg-header: rgba(252, 251, 249, 0.92);
  --border-color: #e2dfd8;
  --surface-hover: rgba(29, 29, 31, 0.06);
  --surface-overlay: rgba(29, 29, 31, 0.08);
  --border-subtle: rgba(29, 29, 31, 0.12);
  --glass-surface: rgba(252, 251, 249, 0.92);

  /* Text - Improved contrast for accessibility (WCAG AA) */
  --text-main: #1d1d1f;
  --text-muted: #5e5b54;
  /* v2: 5.5:1 on #F9F8F6 (was #6B665E at 4.8:1) */
  --text-secondary: var(--text-muted);
  /* Fallback: en light, alias de muted. Redefini en dark/deep-ether. */
  --text-link: #4d7a0f;
  --text-link-hover: #3a5e0b;

  /* Accents */
  --accent-primary: #a8c545;
  --accent-text: #3f5e14;
  /* Scission WCAG : accent texte ≥ 4.5:1 sur blanc */
  --accent-secondary: #8eaf35;
  /* Audit fix: aligned with light-ether Tailwind palette for consistency */
  --accent-danger: #ef4444;
  --accent-warning: #f59e0b;
  --accent-success: #22c55e;
  --accent-blue: #3b82f6;

  /* Shadows v2: 3-layer physical model */
  --shadow-card:
    0 0.5px 1px rgba(26, 36, 27, 0.08), 0 2px 6px rgba(26, 36, 27, 0.06),
    0 6px 16px rgba(26, 36, 27, 0.03);
  --shadow-elevated:
    0 0.5px 1.5px rgba(26, 36, 27, 0.1), 0 3px 8px rgba(26, 36, 27, 0.08),
    0 10px 28px rgba(26, 36, 27, 0.05);
  --shadow-floating:
    0 1px 2px rgba(26, 36, 27, 0.12), 0 4px 12px rgba(26, 36, 27, 0.1),
    0 16px 40px rgba(26, 36, 27, 0.07), 0 32px 64px -16px rgba(26, 36, 27, 0.04);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  /* Radius squircle pour avatars (entre rond et carr�) */
  --radius-squircle: 30%;

  --quote-bg: #f3f2ee;
  --quote-border: #a8c545;
  --spoiler-bg: #e5e2da;
  --input-bg: #f3f2ee;
  --input-border: transparent;

  /* Focus ring for accessibility */
  --focus-ring-color: rgba(var(--accent-primary-rgb, 168, 197, 69), 0.5);
  --focus-ring-offset: 2px;

  /* === ROLE COLOR TOKENS === */
  --role-admin: #ff4b4b;
  --role-admin-bg: rgba(255, 75, 75, 0.12);
  --role-mod: #22c55e;
  --role-mod-bg: rgba(34, 197, 94, 0.12);
  --role-user-color: var(--text-muted);
  --role-user-bg: var(--bg-surface-alt);

  /* === ACCENT GLOW TOKENS (theme-switching) === */
  --accent-glow: rgba(168, 197, 69, 0.35);
  --accent-glow-soft: rgba(168, 197, 69, 0.15);
  --accent-highlight: rgba(168, 197, 69, 0.05);

  /* === INPUT VALIDATION TOKENS (R5) === */
  --input-error-border: var(--accent-danger);
  --input-error-bg: rgba(255, 59, 48, 0.05);
  --input-error-text: #d32f2f;
  --input-success-border: var(--accent-success);
  --input-success-bg: rgba(52, 199, 89, 0.05);
  --input-warning-border: var(--accent-warning);
  --input-warning-bg: rgba(255, 149, 0, 0.05);
  --input-warning-text: #b45309;

  /* Topic & Post defaults */
  --topic-title-color: var(--text-main);
  --topic-title-shadow: none;
  --post-content-color: var(--text-main);
  --post-bg: var(--bg-surface);
  --post-border: var(--border-color);
  --bg-card: #ffffff;

  /* Light sensory tokens v2 */
  --surface-tint: rgba(168, 197, 69, 0.03);
  --surface-tint-hover: rgba(168, 197, 69, 0.05);
  --code-bg: rgba(168, 197, 69, 0.08);
  --code-border: rgba(168, 197, 69, 0.15);
  --code-text: #3f5e14;
  --link-underline: rgba(77, 122, 15, 0.25);
  --link-underline-hover: rgba(77, 122, 15, 0.5);
  --header-glow: none;
}

[data-theme="dark"],
[data-theme="grey"],
[data-theme="custom"] {
  /* WEB INTERFACE GUIDELINES: color-scheme for native dark controls */
  color-scheme: dark;

  /* ═══ FOREST NIGHT v7 — Sensory Design ═══
       v6→v7 : Stevens Effect (danger désaturé), Surface Tint (MD3),
       post-content doux (Buchner 2007), header glow, code blocks,
       link underline tokens, focus ring double-halo.
       ═══════════════════════════════════════════════ */

  /* --- Surfaces (Forest Night — Delta ~4-5% entre chaque niveau) --- */
  --bg-body: #0c100e;
  /* v6.1: L*≈5.3 — Abaissé pour delta body→surface ≥4.7 L* (Weber-Fechner fix) */
  --bg-surface: #161c18;
  /* L≈11% — Surface carte, canopée sombre (+4%) */
  --bg-surface-alt: #1e2822;
  /* L≈16% — Surface élevée, mousse dense (+5%) */
  --bg-surface-raised: #28352e;
  /* L≈21% — Éléments flottants, feuillage (+5%) */
  --bg-header: rgba(22, 28, 24, 0.88);
  --border-color: #2f3e36;
  /* Bordure verte visible — pas juste du gris */
  --surface-hover: rgba(168, 197, 69, 0.1);
  --surface-overlay: rgba(5, 8, 6, 0.8);
  --border-subtle: rgba(168, 197, 69, 0.14);
  --glass-surface: rgba(22, 28, 24, 0.88);

  /* --- Typographie (Crisp Mint) --- */
  --text-main: #e8ede9;
  /* v6: micro-désaturation — vert perceptible sans fatigue */
  --text-secondary: #a8b8ae;
  --text-muted: #96ae9b;
  /* v6.1: remonté de #8a9d92 → WCAG AA 4.6:1 sur bg-surface #161c18 */
  --text-link: #b5d455;
  --text-link-hover: #cde67c;

  /* --- Accents (v7: Stevens Effect desaturation) --- */
  --accent-primary: #a8c545;
  --accent-text: #b5d455;
  --accent-secondary: #8eaf35;
  --accent-danger: #e88b8b;
  /* v7: Stevens Effect — désaturé de S=93% à S=60% pour dark.
       Sur fond sombre, les rouges paraissent sur-saturés (irradiation).
       Ce rose-rouge est perçu aussi "urgement" mais sans agresser l'œil. */
  --accent-warning: #fbbf24;
  --accent-success: #34d399;
  --accent-blue: #60a5fa;

  /* --- Glow & Accent tokens --- */
  --accent-glow: rgba(168, 197, 69, 0.28);
  --accent-glow-soft: rgba(168, 197, 69, 0.14);
  --accent-highlight: rgba(168, 197, 69, 0.08);

  /* --- Surface Tint (Material Design 3) --- */
  /* MD3 : chaque niveau d'élévation reçoit une micro-couche de
       couleur primaire en overlay. Renforce l'identité chromatique
       et améliore la hiérarchie des surfaces sans changer les hex. */
  --surface-tint: rgba(168, 197, 69, 0.04);
  --surface-tint-hover: rgba(168, 197, 69, 0.07);
  --surface-tint-active: rgba(168, 197, 69, 0.1);

  /* --- Composants --- */
  --quote-bg: #1e2822;
  --quote-border: #a8c545;
  --spoiler-bg: #2f3e36;
  --input-bg: #1e2822;
  --input-border: transparent;
  --role-admin: #e88b8b;
  /* v7: aligné avec accent-danger désaturé */
  --role-admin-bg: rgba(232, 139, 139, 0.12);
  --role-mod: #34d399;
  --role-mod-bg: rgba(52, 211, 153, 0.15);

  /* --- Code blocks & inline code --- */
  --code-bg: rgba(168, 197, 69, 0.06);
  --code-border: rgba(168, 197, 69, 0.12);
  --code-text: #b5d455;

  /* --- Link decoration --- */
  --link-underline: rgba(181, 212, 85, 0.3);
  --link-underline-hover: rgba(181, 212, 85, 0.6);

  /* --- Header ambient glow --- */
  --header-glow:
    0 1px 0 rgba(168, 197, 69, 0.08), 0 4px 20px rgba(5, 12, 8, 0.3);

  /* --- Ombres (teintées forêt — PAS noir pur) --- */
  --shadow-card: 0 2px 8px rgba(5, 12, 8, 0.4), 0 6px 20px rgba(5, 12, 8, 0.25);
  --shadow-elevated:
    0 4px 12px rgba(5, 12, 8, 0.5), 0 12px 32px rgba(5, 12, 8, 0.3);
  --shadow-floating:
    0 8px 20px rgba(5, 12, 8, 0.6), 0 20px 50px rgba(5, 12, 8, 0.35);

  /* Glow subtil pour les elements interactifs */
  --glow-border: rgba(168, 197, 69, 0.22);

  /* --- Topic & Post --- */
  --topic-title-color: #f5fcf7;
  --topic-title-shadow: none;
  --post-content-color: #d5ddd7;
  /* v7: Buchner & Baumgartner (2007) — text légèrement plus doux
       que #dfe6e1 pour réduire la fatigue oculaire en lecture prolongée.
       Ratio vs bg-surface : 10.2:1 (AAA). Confort > brillance. */

  /* --- Validation tokens dark (v7: danger désaturé) --- */
  --input-error-bg: rgba(232, 139, 139, 0.1);
  --input-error-border: #e88b8b;
  --input-error-text: #f0bcbc;
  /* v7: plus doux que #FCA5A5, cohérent avec le red désaturé */
  --input-success-bg: rgba(52, 211, 153, 0.12);
  --input-success-border: #34d399;
  --input-warning-bg: rgba(251, 191, 36, 0.12);
  --input-warning-border: #fbbf24;

  /* --- Post tokens dark --- */
  --post-bg: var(--bg-surface);
  --post-border: var(--border-color);
  --bg-card: #1c2520;
  /* Cards légèrement au-dessus de bg-surface — les bulles POP */

  /* --- Modal --- */
  --modal-backdrop: rgba(5, 8, 6, 0.75);
  --modal-blur: blur(12px);
  --modal-card-shadow:
    0 25px 50px -12px rgba(5, 12, 8, 0.6), 0 12px 24px rgba(5, 12, 8, 0.35);

  /* --- Focus ring --- */
  --focus-ring-color: rgba(168, 197, 69, 0.45);
}

[data-theme="deep-ether"] {
  /* WEB INTERFACE GUIDELINES: color-scheme tells browsers to render native controls in dark mode */
  color-scheme: dark;

  /* ═══════════════════════════════════════════════════════════
       DEEP ETHER v8 — "Electric Cosmos"
       v5→v8 : Palette intégralement poussée vers le bleu.
       Primary plus lumineux (#3B82F6), surfaces blue-black,
       sous-ton bleu présent PARTOUT. Hiérarchie ≥5% L*.
       Glows 2× plus intenses. Le bleu EST l'univers.
       ═══════════════════════════════════════════════════════════ */
  --primary-azure: #3b82f6;

  /* --- Surfaces (Blue-Black Cosmos — Delta ≥5% entre niveaux) --- */
  --surface-void: #060b18;
  /* v8: L*≈3.5% — Nuit cosmique, noir-bleu profond */
  --surface-glass: rgba(12, 18, 38, 0.92);

  --bg-body: var(--surface-void);
  /* Atmospheric radial glow — pulsation cosmique */
  --bg-body-glow: radial-gradient(
    ellipse 80% 50% at 50% -10%,
    rgba(59, 130, 246, 0.1) 0%,
    transparent 65%
  );
  --bg-surface: #0e1528;
  /* v8: L*≈8.5% — Surface carte, encre stellaire (+5%) */
  --bg-surface-alt: #152038;
  /* v8: L*≈13.5% — Surface élevée, brume d'étoile (+5%) */
  --bg-surface-raised: #1c2a4a;
  /* v8: L*≈18.5% — Éléments flottants, nébulosité (+5%) */
  --bg-header: var(--surface-glass);
  --border-color: rgba(99, 140, 230, 0.22);
  --surface-hover: rgba(99, 140, 230, 0.14);
  --surface-overlay: rgba(4, 6, 16, 0.8);
  --border-subtle: rgba(99, 140, 230, 0.28);
  --glass-surface: var(--surface-glass);

  /* --- Glassmorphism (v8: enhanced electric glow) --- */
  --glow-border: rgba(99, 160, 255, 0.2);
  --glow-shadow: 0 0 30px rgba(59, 130, 246, 0.2);

  /* --- Typographie (Electric Ice — WCAG verified on #0E1528) --- */
  --text-main: #e4e9f5;
  /* v8: sous-ton bleu renforcé, ratio 13:1 — AAA */
  --text-secondary: #a4bae0;
  /* v8: H≈220° S≈35% L≈76% — bleu-lavande, ratio 7.8:1 */
  --text-muted: #8ba2cb;
  /* v8: H≈218° S≈30% L≈67% — ratio 5.1:1 sur #0E1528 — AA */
  --text-link: #6ba6ff;
  /* v8: plus lumineux, ratio 5.5:1 */
  --text-link-hover: #93c0ff;

  /* --- Accents (v8: Electric Cosmos — bleu poussé) --- */
  --accent-primary: var(--primary-azure);
  --accent-text: #6ba6ff;
  /* v8: scission WCAG — texte éclairci, ratio ≥ 5:1 sur surfaces */
  --accent-secondary: #5b9bff;
  --accent-danger: #fb7185;
  /* v8: rose-rouge (Tailwind rose-400) — contraste amélioré sur blue-black */
  --accent-warning: #fcd34d;
  /* v8: Tailwind amber-300 — plus lumineux sur fond bleu sombre */
  --accent-success: #34d399;
  --accent-blue: #2196f3;

  /* --- Glow tokens (v8: color-mix() amplifié) --- */
  --accent-glow: color-mix(in srgb, var(--primary-azure) 35%, transparent);
  --accent-glow-soft: color-mix(in srgb, var(--primary-azure) 18%, transparent);
  --accent-highlight: color-mix(in srgb, var(--primary-azure) 10%, transparent);

  /* --- Composants (v8: teinte bleue partout) --- */
  --quote-bg: #131d35;
  --quote-border: var(--primary-azure);
  --spoiler-bg: rgba(28, 42, 74, 0.7);
  --input-bg: #131d35;
  --input-border: rgba(99, 140, 230, 0.12);
  --role-admin: #fb7185;
  --role-admin-bg: rgba(251, 113, 133, 0.14);
  --role-mod: #34d399;
  --role-mod-bg: rgba(52, 211, 153, 0.14);

  /* --- Ombres (v8: teintées bleu cosmique) --- */
  --shadow-depth: 0 20px 40px -10px rgba(4, 8, 30, 0.55);
  --shadow-card:
    0 2px 8px rgba(4, 8, 30, 0.35), 0 4px 16px rgba(4, 8, 30, 0.25);
  --shadow-elevated:
    0 4px 12px rgba(4, 8, 30, 0.45), 0 8px 30px rgba(4, 8, 30, 0.32);
  --shadow-floating:
    0 8px 24px rgba(4, 8, 30, 0.5), 0 16px 48px rgba(4, 8, 30, 0.38);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* --- Topic & Post (v8: electric blue tints) --- */
  --topic-title-color: #eef0fa;
  --topic-title-shadow: 0 1px 8px rgba(59, 130, 246, 0.12);
  --post-content-color: #c5cbdd;
  --post-bg: var(--bg-surface);
  --post-border: rgba(99, 140, 230, 0.06);

  --bg-card: #0c1324;

  /* --- Validation tokens (v8: alignés rose-rouge) --- */
  --input-error-bg: rgba(251, 113, 133, 0.12);
  --input-error-border: #fb7185;
  --input-error-text: #fdcdd5;
  --input-success-bg: rgba(52, 211, 153, 0.12);
  --input-success-border: #34d399;
  --input-warning-bg: rgba(252, 211, 77, 0.12);
  --input-warning-border: #fcd34d;

  /* --- Modal (v8: backdrop plus bleu) --- */
  --modal-backdrop: rgba(4, 6, 22, 0.82);
  --modal-blur: blur(14px);
  --modal-card-shadow:
    0 25px 50px -12px rgba(4, 8, 30, 0.55), 0 12px 24px rgba(4, 8, 30, 0.35);

  /* --- Focus ring (v8: brighter azure) --- */
  --focus-ring-color: rgba(59, 130, 246, 0.45);

  /* --- Surface Tint (v8: color-mix() augmenté) --- */
  --surface-tint: color-mix(in srgb, var(--primary-azure) 5%, transparent);
  --surface-tint-hover: color-mix(
    in srgb,
    var(--primary-azure) 8%,
    transparent
  );
  --surface-tint-active: color-mix(
    in srgb,
    var(--primary-azure) 12%,
    transparent
  );

  /* --- Code blocks & inline code (v8: plus présent) --- */
  --code-bg: color-mix(in srgb, var(--primary-azure) 8%, transparent);
  --code-border: color-mix(in srgb, var(--primary-azure) 16%, transparent);
  --code-text: color-mix(in srgb, var(--primary-azure) 55%, white);

  /* --- Link decoration (v8: bolder) --- */
  --link-underline: color-mix(in srgb, var(--primary-azure) 25%, transparent);
  --link-underline-hover: color-mix(
    in srgb,
    var(--primary-azure) 50%,
    transparent
  );

  /* --- Glow border (v8: more visible) --- */
  --glow-border: color-mix(in srgb, var(--primary-azure) 18%, transparent);

  /* --- Header ambient glow (v8: amplified blue aura) --- */
  --header-glow:
    0 1px 0 rgba(59, 130, 246, 0.1), 0 4px 24px rgba(4, 8, 30, 0.35);
}

/* ===================================
   GREY THEME — Discord/Chrome Inspired
   Neutral grays, flat design, no green tints.
   =================================== */
[data-theme="grey"] {
  color-scheme: dark;

  /* Discord-inspired neutral palette */
  --bg-body: #1e1f22;
  --bg-surface: #2b2d31;
  --bg-surface-alt: #313338;
  --bg-surface-raised: #383a40;
  --bg-header: rgba(43, 45, 49, 0.95);

  --border-color: #3f4147;
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-overlay: rgba(0, 0, 0, 0.6);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --glass-surface: rgba(43, 45, 49, 0.95);

  /* Text */
  --text-main: #f2f3f5;
  --text-secondary: #b5bac1;
  --text-muted: #949ba4;
  --text-link: #00a8fc;
  --text-link-hover: #5865f2;

  /* Accents (Blurple/Neutral) */
  --accent-primary: #5865f2;
  --accent-primary-rgb: 88, 101, 242;
  --accent-text: #ffffff;
  --accent-secondary: #4752c4;
  --accent-danger: #da373c;
  --accent-warning: #fee75c;
  --accent-success: #23a559;
  --accent-blue: #5865f2;

  /* Glows - disabled or very subtle blurple */
  --accent-glow: rgba(88, 101, 242, 0.2);
  --accent-glow-soft: rgba(88, 101, 242, 0.1);
  --accent-highlight: rgba(88, 101, 242, 0.05);

  /* Surface Tint */
  --surface-tint: rgba(255, 255, 255, 0.02);
  --surface-tint-hover: rgba(255, 255, 255, 0.04);
  --surface-tint-active: rgba(255, 255, 255, 0.08);

  /* Components */
  --quote-bg: #1e1f22;
  --quote-border: #3f4147;
  --spoiler-bg: #111214;
  --input-bg: #1e1f22;
  --input-border: #1e1f22;

  --role-admin: #da373c;
  --role-admin-bg: rgba(218, 55, 60, 0.12);
  --role-mod: #23a559;
  --role-mod-bg: rgba(35, 165, 89, 0.12);

  /* Code */
  --code-bg: #1e1f22;
  --code-border: #3f4147;
  --code-text: #b5bac1;

  /* Link decoration */
  --link-underline: transparent;
  --link-underline-hover: rgba(88, 101, 242, 0.5);

  /* Header ambient glow */
  --header-glow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-elevated:
    0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-floating:
    0 8px 24px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3);

  --glow-border: rgba(255, 255, 255, 0.05);

  /* Topic & Post */
  --topic-title-color: #f2f3f5;
  --topic-title-shadow: none;
  --post-content-color: #dbdee1;

  --post-bg: var(--bg-surface);
  --post-border: transparent;
  --bg-card: #2b2d31;

  /* Validation */
  --input-error-bg: rgba(218, 55, 60, 0.1);
  --input-error-border: #da373c;
  --input-error-text: #fa777c;
  --input-success-bg: rgba(35, 165, 89, 0.1);
  --input-success-border: #23a559;
  --input-warning-bg: rgba(254, 231, 92, 0.1);
  --input-warning-border: #fee75c;

  /* Modal */
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-blur: blur(8px);
  --modal-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Focus */
  --focus-ring-color: rgba(88, 101, 242, 0.5);

  /* === DISABLE HOT TOPICS DEFAULT NEON ON GREY === */
  --topic-hot-bg: transparent;
  --topic-hot-bg-hover: var(--surface-hover);
  --topic-hot-border: var(--border-subtle);
  --topic-hot-border-hover: var(--border-color);
  --topic-hot-shadow: none;
  --topic-hot-shadow-hover: none;
  --topic-hot-bump-out: transparent;
  --topic-hot-bump-in: transparent;
}

/* ===================================
   DEEP ETHER v7 — Atmospheric Effects
   =================================== */

/* Ambient glow — Breathing aurora (20s cycle)
   Uses @property typed vars for gradient animation.
   Browsers without @property support get a static glow (graceful degradation).
   The movement is slow enough to be perceived as "life" not "distraction". */
[data-theme="deep-ether"] .main-content {
  background:
    radial-gradient(
      ellipse 80% 50% at var(--ether-glow-x, 50%) -10%,
      rgba(59, 130, 246, var(--ether-glow-opacity, 0.1)) 0%,
      transparent 65%
    ),
    var(--bg-body);
  animation: etherBreathe 20s ease-in-out infinite;
  min-width: 0;
  min-height: 0;
}

@keyframes etherBreathe {
  0%,
  100% {
    --ether-glow-opacity: 0.07;
    --ether-glow-x: 48%;
  }

  33% {
    --ether-glow-opacity: 0.14;
    --ether-glow-x: 52%;
  }

  66% {
    --ether-glow-opacity: 0.09;
    --ether-glow-x: 50%;
  }
}

/* Scroll fade — Content emerges from and dissolves into the void.
   Zero performance cost (mask-image is GPU-composited). */
[data-theme="deep-ether"] #posts-container {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 40px,
    black calc(100% - 60px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 40px,
    black calc(100% - 60px),
    transparent 100%
  );
}

/* Respect reduced motion — disable breathing animation */
@media (prefers-reduced-motion: reduce) {
  [data-theme="deep-ether"] .main-content {
    animation: none;
    min-width: 0;
    min-height: 0;
  }
}

/* Deep Ether - Post styling (v7: @starting-style materialization)
   Posts emerge from a blurred state — as if materializing from the ether.
   Browsers without @starting-style get instant render (no regression). */
[data-theme="deep-ether"] .post {
  border-top: 1px solid var(--glow-border);
  box-shadow: var(--shadow-card);
  background: var(--post-bg);

  /* Materialization transition targets — PERF v3: removed filter:blur (forces
     expensive per-pixel repaint on 70+ posts). opacity+transform only = GPU-only. */
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.45s var(--ease-out-expo),
    transform 0.45s var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background-color var(--duration-normal) ease;

  /* @starting-style: initial state when post enters DOM */
  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

[data-theme="deep-ether"] .post:hover {
  box-shadow: var(--shadow-elevated);
  background: var(--bg-surface-alt);
}

/* Deep Ether - Physical press feedback (v6)
   Apple HIG touch interaction: elements compress slightly on press.
   Limited to hover-capable devices to avoid scroll-triggered flicker on mobile. */
@media (hover: hover) {
  [data-theme="deep-ether"] .post:active {
    transform: scale(0.99);
    transition: transform 0.1s var(--ease-out-expo);
  }

  [data-theme="deep-ether"] .topic-card:active {
    transform: scale(0.98);
    transition: transform 0.1s var(--ease-out-expo);
  }

  [data-theme="deep-ether"] .btn:active,
  [data-theme="deep-ether"] .btn-create-topic:active {
    transform: scale(0.96);
    transition: transform 0.08s var(--ease-out-expo);
  }
}

[data-theme="deep-ether"] .topic-card.active {
  box-shadow:
    0 0 0 1px var(--primary-azure),
    0 4px 20px rgba(59, 130, 246, 0.3);
  border-color: var(--primary-azure);
}

/* Premium accent bar for active elements */
[data-theme="deep-ether"] .topic-card.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary-azure) 0%, #5b9bff 100%);
  border-radius: 3px 0 0 3px;
}

/* Audit fix: duplicate topic-card block removed — canonical definitions at L.2126+ */

@supports (color: color(display-p3 1 1 1)) {
  [data-theme="deep-ether"] {
    --primary-azure: color(display-p3 0.23 0.51 0.96);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DEEP ETHER v8.1 — "2025 Design Upgrades"
   Haptic springs, animated gradient borders, glassmorphism toasts,
   premium avatar pulse, and more.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HAPTIC SPRING FEEDBACK ──────────────────────────────
   Apple-style bouncy press feedback instead of flat scale.
   Uses --ease-spring with overshoot for that "snappy" feel.
   ─────────────────────────────────────────────────────────── */
@media (hover: hover) {
  [data-theme="deep-ether"] .btn:active,
  [data-theme="deep-ether"] .btn-create-topic:active {
    transform: scale(0.94);
    transition: transform 0.08s cubic-bezier(0.2, 0, 0, 1);
  }

  [data-theme="deep-ether"] .btn:not(:active) {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  [data-theme="deep-ether"] .post:active {
    transform: scale(0.995);
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
  }

  [data-theme="deep-ether"] .post:not(:active) {
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      background-color var(--duration-normal) ease;
  }

  [data-theme="deep-ether"] .topic-card:active {
    transform: scale(0.985);
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
  }

  [data-theme="deep-ether"] .topic-card:not(:active) {
    transition:
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow var(--duration-normal) ease,
      border-color var(--duration-normal) ease;
  }
}

/* ── 2. ANIMATED GRADIENT BORDER — Active Topic Card ────────
   Rotating conic-gradient on the active card's pseudo-element.
   Creates a "breathing" electric border that screams premium.
   ─────────────────────────────────────────────────────────── */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to {
    --border-angle: 360deg;
  }
}

[data-theme="deep-ether"] .topic-card.active {
  position: relative;
  border-color: transparent;
  background-clip: padding-box;
}

[data-theme="deep-ether"] .topic-card.active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    var(--primary-azure),
    rgba(99, 140, 230, 0.3),
    var(--primary-azure),
    rgba(99, 140, 230, 0.3),
    var(--primary-azure)
  );
  z-index: -1;
  animation: borderRotate 4s linear infinite;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 1px;
  opacity: 0.8;
}

/* Stronger glow shadow for active card */
[data-theme="deep-ether"] .topic-card.active {
  box-shadow:
    0 0 20px color-mix(in srgb, var(--primary-azure) 20%, transparent),
    0 4px 16px rgba(4, 8, 30, 0.35);
}

/* ── 3. PREMIUM AVATAR PULSE — Electric Blue Aura ──────────
   A subtle pulsing glow around avatars on hover.
   Indicates interactive presence — feels alive.
   ─────────────────────────────────────────────────────────── */
@keyframes avatarPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1.5px color-mix(in srgb, var(--primary-azure) 28%, transparent),
      0 0 12px color-mix(in srgb, var(--primary-azure) 18%, transparent),
      0 0 24px color-mix(in srgb, var(--primary-azure) 8%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--primary-azure) 35%, transparent),
      0 0 18px color-mix(in srgb, var(--primary-azure) 25%, transparent),
      0 0 32px color-mix(in srgb, var(--primary-azure) 12%, transparent);
  }
}

[data-theme="deep-ether"] .post-avatar img:hover,
[data-theme="deep-ether"] .author-avatar img:hover {
  animation: avatarPulse 2s ease-in-out infinite;
}

/* Header avatar — premium focus ring */
[data-theme="deep-ether"] .header-avatar {
  transition:
    box-shadow 0.3s var(--ease-out-expo),
    border-color 0.3s ease;
}

[data-theme="deep-ether"] .header-avatar:hover {
  box-shadow:
    0 0 0 2px var(--surface-void),
    0 0 0 4px color-mix(in srgb, var(--primary-azure) 40%, transparent);
}

/* ── 4. GLASSMORPHISM NOTIFICATIONS & TOASTS ───────────────
   All toast/notification popups get premium glass treatment.
   Deep blur + blue tint + glow border.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] .notification-toast,
[data-theme="deep-ether"] .toast-message,
[data-theme="deep-ether"] .flash-message {
  background: rgba(12, 18, 38, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(99, 140, 230, 0.15) !important;
  box-shadow:
    0 8px 32px rgba(4, 8, 30, 0.45),
    0 0 0 1px rgba(99, 140, 230, 0.08),
    inset 0 1px 0 rgba(99, 140, 230, 0.06) !important;
}

/* Success variant */
[data-theme="deep-ether"] .notification-toast.success,
[data-theme="deep-ether"] .toast-success {
  border-color: rgba(52, 211, 153, 0.25) !important;
  box-shadow:
    0 8px 32px rgba(4, 8, 30, 0.45),
    0 0 12px rgba(52, 211, 153, 0.1) !important;
}

/* Error variant */
[data-theme="deep-ether"] .notification-toast.error,
[data-theme="deep-ether"] .toast-error {
  border-color: rgba(251, 113, 133, 0.25) !important;
  box-shadow:
    0 8px 32px rgba(4, 8, 30, 0.45),
    0 0 12px rgba(251, 113, 133, 0.1) !important;
}

/* ── 5. INTERACTIVE GLOW BUTTONS ───────────────────────────
   Buttons get a subtle glow halo on hover in deep-ether.
   The glow color matches the button's semantic color.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] .btn:hover {
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--primary-azure) 25%, transparent),
    0 1px 3px rgba(4, 8, 30, 0.3);
  transition:
    box-shadow 0.25s var(--ease-out-expo),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease;
}

[data-theme="deep-ether"] .btn-danger:hover {
  box-shadow:
    0 4px 14px rgba(251, 113, 133, 0.25),
    0 1px 3px rgba(4, 8, 30, 0.3);
}

[data-theme="deep-ether"] .btn-success:hover {
  box-shadow:
    0 4px 14px rgba(52, 211, 153, 0.25),
    0 1px 3px rgba(4, 8, 30, 0.3);
}

/* ── 6. SMOOTH CARD ENTRANCE — Staggered Animation ────────
   Cards in topic lists enter with a staggered slide-up,
   creating a cascade "waterfall" effect.
   ─────────────────────────────────────────────────────────── */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="deep-ether"] .topic-card {
  animation: cardSlideIn 0.4s var(--ease-out-expo) both;
}

[data-theme="deep-ether"] .topic-card:nth-child(1) {
  animation-delay: 0.02s;
}

[data-theme="deep-ether"] .topic-card:nth-child(2) {
  animation-delay: 0.04s;
}

[data-theme="deep-ether"] .topic-card:nth-child(3) {
  animation-delay: 0.06s;
}

[data-theme="deep-ether"] .topic-card:nth-child(4) {
  animation-delay: 0.08s;
}

[data-theme="deep-ether"] .topic-card:nth-child(5) {
  animation-delay: 0.1s;
}

[data-theme="deep-ether"] .topic-card:nth-child(6) {
  animation-delay: 0.12s;
}

[data-theme="deep-ether"] .topic-card:nth-child(7) {
  animation-delay: 0.14s;
}

[data-theme="deep-ether"] .topic-card:nth-child(8) {
  animation-delay: 0.16s;
}

[data-theme="deep-ether"] .topic-card:nth-child(9) {
  animation-delay: 0.18s;
}

[data-theme="deep-ether"] .topic-card:nth-child(10) {
  animation-delay: 0.2s;
}

/* After 10, no more delay (prevents jarring long waits) */
[data-theme="deep-ether"] .topic-card:nth-child(n + 11) {
  animation-delay: 0.22s;
}

/* ── 7. LINK SHIMMER — Hover Effect ───────────────────────
   Links in post content get a subtle gradient shimmer on hover.
   Pure CSS, GPU-composited, zero performance cost.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"]
  .post-content
  a:not(.sticker):not(.sticker-thumb):hover {
  background: linear-gradient(
    120deg,
    transparent 0%,
    color-mix(in srgb, var(--primary-azure) 6%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: linkShimmer 1.5s ease-in-out;
  border-radius: 2px;
  padding: 1px 2px;
  margin: -1px -2px;
}

@keyframes linkShimmer {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* ── 8. SCROLLBAR — Premium Blue Glass ────────────────────
   The scrollbar itself gets themed in deep-ether.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="deep-ether"] ::-webkit-scrollbar-track {
  background: rgba(6, 11, 24, 0.4);
}

[data-theme="deep-ether"] ::-webkit-scrollbar-thumb {
  background: rgba(99, 140, 230, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(99, 140, 230, 0.06);
  transition: background 0.2s;
}

[data-theme="deep-ether"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 140, 230, 0.35);
}

[data-theme="deep-ether"] ::-webkit-scrollbar-thumb:active {
  background: rgba(59, 130, 246, 0.5);
}

/* Firefox scrollbar */
[data-theme="deep-ether"] * {
  scrollbar-color: rgba(99, 140, 230, 0.2) rgba(6, 11, 24, 0.4);
  scrollbar-width: thin;
}

/* ── 9. FOCUS RING — Premium Double Ring ──────────────────
   Focus-visible gets a double-ring treatment:
   inner ring = accent, outer ring = soft glow.
   Better accessibility + looks gorgeous.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] :focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-void),
    0 0 0 4px color-mix(in srgb, var(--primary-azure) 50%, transparent),
    0 0 12px color-mix(in srgb, var(--primary-azure) 15%, transparent);
}

/* ── 10. REACTION BADGES — Glow on Active ────────────────
   Active reaction badges get a subtle accent glow.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] .reaction-badge.reaction-active {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--primary-azure) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--primary-azure) 25%, transparent);
}

/* ── 11. MODAL ENTRANCE — Premium Spring ─────────────────
   Modals pop in with a spring bounce instead of linear fade.
   ─────────────────────────────────────────────────────────── */
@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }

  50% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-theme="deep-ether"] .modal-card,
[data-theme="deep-ether"] .profile-modal {
  animation: modalSpringIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Backdrop fade-in */
[data-theme="deep-ether"] .modal-backdrop,
[data-theme="deep-ether"] .profile-modal-overlay {
  animation: fadeIn 0.25s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── 12. TEXT SELECTION — Electric Blue ───────────────────
   Premium branded text selection color.
   ─────────────────────────────────────────────────────────── */
[data-theme="deep-ether"] ::selection {
  background: color-mix(in srgb, var(--primary-azure) 40%, transparent);
  color: #eef0fa;
}

[data-theme="deep-ether"] ::-moz-selection {
  background: color-mix(in srgb, var(--primary-azure) 40%, transparent);
  color: #eef0fa;
}

/* Respect reduced motion for ALL animations */
@media (prefers-reduced-motion: reduce) {
  [data-theme="deep-ether"] .topic-card,
  [data-theme="deep-ether"] .post-avatar img:hover,
  [data-theme="deep-ether"] .author-avatar img:hover,
  [data-theme="deep-ether"] .topic-card.active::after,
  [data-theme="deep-ether"] .modal-card,
  [data-theme="deep-ether"] .profile-modal,
  [data-theme="deep-ether"] .post-content a:not(.sticker):hover {
    animation: none !important;
  }
}

/* ================================================================== */
/* ===  THEME: LIGHT ETHER ("Crisp Pear" Edition)                 === */
/* ===  Direction: Céramique froide, Contraste thermique, WCAG AA === */
/* ================================================================== */

[data-theme="light-ether"] {
  /* WEB INTERFACE GUIDELINES: color-scheme tells browsers to render native controls in light mode */
  color-scheme: light;

  /* ═══════════════════════════════════════════════════════════
       CRISP PEAR SYSTEM — Direction Artistique v9.0
       "Céramique Organique" — Monochromatique Analogue
       Règle 60-30-10 : Avoine-Sauge / Encre Forêt / Poire Acide
       ADN Chromatique Unifié : TOUT partage le sous-ton vert/chaud.
       Scission de l'accent : Surface (#A8C545) vs Texte (#3F5E14).

       REFONTE v9.1 — Matérialité Céramique Organique
       Physique 3 couches : Spéculaire + Contact + Diffusion
       Claymorphism sobre : opaque, diffus, tactile.
       ════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

  /* --- 60% : Surface Hierarchy v7.5 -> Modern Clean 2023+ ---
       Des blancs nets et un contraste amélioré pour une UI premium.
       L4 (body):    #F7F9FA  Gris très clair (froid/neutre)
       L3 (surface): #FFFFFF  Cartes purement blanches
       L2 (alt):     #F0F3F5  Surfaces secondaires
       L1 (raised):  #FFFFFF  Éléments surélevés */
  --bg-body: #f7f9fa;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f0f3f5;
  --bg-surface-raised: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --border-color: rgba(0, 0, 0, 0.06);

  /* --- 30% : L'Encre (Modern Slate) --- */
  --text-main: #1a1d20;
  --text-muted: #64748b;
  /* Audit fix: Modern slate grey, excellent readability */

  /* --- Liens : Vert Forêt Premium --- */
  --text-link: #2d5a27;
  --text-link-hover: #14532d;

  /* --- 10% : L'Énergie (Poire Luminous) --- */
  --accent-primary: #9bce26;
  /* Yellow-Green (Key Hue) */
  --accent-text: #3f6212;
  --accent-secondary: #84cc16;

  /* --- Sémantique : Harmonie "Split-Complementary" / "Analogous" selon la théorie des couleurs RGB ---
       Livre référence : "Applying Color Theory to Digital Media and Visualization" (Theresa-Marie Rhyne)
       Key Hue : Yellow-Green (#9BCE26)
       Analogous (Adjacents) : Emerald Green (Success), Amber/Yellow (Warning)
       Complementary (Opposés pour l'action pure) : Violet/Magenta (utilisé pour les alertes/focus) */

  --accent-danger: #e11d48;
  /* Red-Magenta (Rose) - Split Complementary au Yellow-Green pour un contraste maximal sans agresser l'oeil */
  --accent-warning: #f59e0b;
  /* Amber (Yellow) - Analogous adjacent */
  --accent-success: #10b981;
  /* Emerald (Green) - Analogous adjacent */
  --accent-blue: #6366f1;
  /* Indigo (Blue-Violet) - Split Complementary opposé, pour l'info neutre */

  /* Variable compat */
  --primary-azure: #6366f1;
  --primary-matcha: #9bce26;
  --pear-fresh: #9bce26;

  /* ——————————————————————————————————————————————————————————————————————————————————————————————————
       OMBRES MODERNES 2023+ - Elevation Douce et Multicouche
       Remplacement du Claymorphism lourd par des ombres portées douces et réalistes.
       ================================================================= */

  /* Niveau 1 - Elevation Faible (cartes sidebar, tuiles repos) */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);

  /* Niveau 2 - Elevation Moyenne (posts actifs, hover) */
  --shadow-elevated:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

  /* Niveau 3 - Elevation Forte (modales, toasts, dropdowns) */
  --shadow-floating:
    0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* --- Composants Spécifiques --- */
  --quote-bg: var(--bg-surface-alt);
  --quote-border: var(--accent-primary);
  --spoiler-bg: #e2e8f0;
  --input-bg: #ffffff;
  /* Modern inputs stand out on the off-white body */
  --input-border: 1px solid rgba(0, 0, 0, 0.1);
  /* Pas de bordure — profondeur via inset shadow */

  /* --- Zéro Néon — bordures strictes uniquement --- */
  --glow-border: transparent;

  /* Focus ring : halo Poire opacité forte (visible sur fond blanc) */
  --focus-ring-color: rgba(168, 197, 69, 0.45);

  /* --- Topic & Post --- */
  --topic-title-color: #141c15;
  --topic-title-shadow: none;
  --post-content-color: #1a241b;
  --post-bg: var(--bg-surface);
  --post-border: transparent;
  /* Borderless Architecture — profondeur via ombres */

  /* --- Accent tokens (v7: color-mix() auto-derivation from --primary-matcha) ---
       Change --primary-matcha and ALL of these adapt automatically. */
  --accent-glow: color-mix(in srgb, var(--primary-matcha) 30%, transparent);
  --accent-glow-soft: color-mix(
    in srgb,
    var(--primary-matcha) 12%,
    transparent
  );
  --accent-highlight: color-mix(in srgb, var(--primary-matcha) 6%, transparent);

  --bg-card: var(--bg-surface);

  /* --- Tokens v2: design system parity --- */
  --surface-hover: rgba(26, 36, 27, 0.05);
  --surface-overlay: rgba(26, 36, 27, 0.06);
  --border-subtle: rgba(26, 36, 27, 0.1);
  --role-admin: #ef4444;
  --role-admin-bg: rgba(239, 68, 68, 0.1);
  --role-mod: #22c55e;
  --role-mod-bg: rgba(34, 197, 94, 0.1);
  --input-warning-text: #b45309;
  /* --- Surface tint (v7: color-mix() derived) --- */
  --surface-tint: color-mix(in srgb, var(--primary-matcha) 2%, transparent);
  --surface-tint-hover: color-mix(
    in srgb,
    var(--primary-matcha) 4%,
    transparent
  );

  /* --- Code blocks (v7: derived from accent) --- */
  --code-bg: color-mix(in srgb, var(--primary-matcha) 8%, transparent);
  --code-border: color-mix(in srgb, var(--primary-matcha) 18%, transparent);
  --code-text: #3f5e14;

  /* --- Link decoration (v7: derived) --- */
  --link-underline: color-mix(in srgb, var(--accent-text) 25%, transparent);
  --link-underline-hover: color-mix(
    in srgb,
    var(--accent-text) 50%,
    transparent
  );
  --header-glow: none;

  /* ═══ Validation Tokens — opacité renforcée pour fond clair (10-12%) ═══ */
  --input-error-bg: rgba(239, 68, 68, 0.1);
  --input-success-bg: rgba(34, 197, 94, 0.1);
  --input-warning-bg: rgba(245, 158, 11, 0.1);

  /* === Modal Backdrop v7.5 — Warm frosted glass === */
  --modal-backdrop: rgba(244, 243, 238, 0.65);
  --modal-blur: blur(14px) saturate(110%);
  --modal-card-shadow:
    0 25px 50px -12px rgba(26, 36, 27, 0.18), 0 12px 24px rgba(63, 94, 20, 0.08);
}

/* ================================================================== */
/* ===  THEME: GREY ("Discord / Chrome" Edition)                  === */
/* ===  Direction: Neutral grey, no color tint, industrial clean  === */
/* ================================================================== */

[data-theme="grey"] {
  color-scheme: dark;

  /* --- Surfaces (Modern Zinc / Slate) --- */
  --bg-body: #09090b;
  /* zinc-950 */
  --bg-surface: #18181b;
  /* zinc-900 */
  --bg-surface-alt: #27272a;
  /* zinc-800 */
  --bg-surface-raised: #3f3f46;
  /* zinc-700 */
  --bg-header: rgba(24, 24, 27, 0.92);
  --border-color: #3f3f46;
  /* zinc-700 */
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-overlay: rgba(0, 0, 0, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --glass-surface: rgba(24, 24, 27, 0.92);

  /* --- Typography (Clean Neutral) --- */
  --text-main: #f4f4f5;
  /* zinc-100 */
  --text-secondary: #a1a1aa;
  /* zinc-400 */
  --text-muted: #71717a;
  /* zinc-500 */
  --text-link: #38bdf8;
  /* sky-400 */
  --text-link-hover: #7dd3fc;
  /* sky-300 */

  /* --- Accent (Modern Cyan/Blue) --- */
  --accent-primary: #0ea5e9;
  /* sky-500 */
  --accent-text: #7dd3fc;
  /* sky-300 */
  --accent-secondary: #0284c7;
  /* sky-600 */
  --accent-danger: #ef4444;
  /* red-500 */
  --accent-warning: #f59e0b;
  /* amber-500 */
  --accent-success: #10b981;
  /* emerald-500 */
  --accent-blue: #0ea5e9;
  /* sky-500 */

  /* --- Glow & tint tokens --- */
  --accent-glow: rgba(14, 165, 233, 0.28);
  --accent-glow-soft: rgba(14, 165, 233, 0.14);
  --accent-highlight: rgba(14, 165, 233, 0.08);
  --surface-tint: rgba(14, 165, 233, 0.03);
  --surface-tint-hover: rgba(14, 165, 233, 0.06);
  --surface-tint-active: rgba(14, 165, 233, 0.09);

  /* --- Composants --- */
  --quote-bg: #27272a;
  /* zinc-800 */
  --quote-border: #0ea5e9;
  /* sky-500 */
  --spoiler-bg: #3f3f46;
  /* zinc-700 */
  --input-bg: #09090b;
  /* zinc-950 */
  --input-border: transparent;
  --role-admin: #f87171;
  --role-admin-bg: rgba(248, 113, 113, 0.12);
  --role-mod: #34d399;
  --role-mod-bg: rgba(52, 211, 153, 0.14);

  /* --- Code blocks & inline code --- */
  --code-bg: rgba(14, 165, 233, 0.06);
  --code-border: rgba(14, 165, 233, 0.12);
  --code-text: #7dd3fc;

  /* --- Link decoration --- */
  --link-underline: rgba(56, 189, 248, 0.3);
  --link-underline-hover: rgba(56, 189, 248, 0.6);

  /* --- Header ambient glow --- */
  --header-glow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3);

  /* --- Shadows (100% neutral — no color tinting) --- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-elevated:
    0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-floating:
    0 8px 20px rgba(0, 0, 0, 0.6), 0 20px 50px rgba(0, 0, 0, 0.4);

  /* --- Glassmorphism (neutral) --- */
  --glow-border: rgba(255, 255, 255, 0.06);
  --glow-shadow: 0 0 25px rgba(0, 0, 0, 0.3);

  /* --- Topic & Post --- */
  --topic-title-color: #f4f4f5;
  /* zinc-100 */
  --topic-title-shadow: none;
  --post-content-color: #d4d4d8;
  /* zinc-300 */
  --post-bg: var(--bg-surface);
  --post-border: var(--border-color);
  --bg-card: #27272a;
  /* zinc-800 */

  /* --- Validation tokens --- */
  --input-error-bg: rgba(239, 68, 68, 0.1);
  --input-error-border: #ef4444;
  --input-error-text: #fca5a5;
  --input-success-bg: rgba(16, 185, 129, 0.12);
  --input-success-border: #10b981;
  --input-warning-bg: rgba(245, 158, 11, 0.12);
  --input-warning-border: #f59e0b;
  --input-warning-text: #f59e0b;

  /* --- Modal --- */
  --modal-backdrop: rgba(0, 0, 0, 0.8);
  --modal-blur: blur(12px);
  --modal-card-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4);

  /* --- Focus ring --- */
  --focus-ring-color: rgba(14, 165, 233, 0.45);

  /* --- Misc compat --- */
  --primary-azure: #0ea5e9;
  --shadow-depth: var(--shadow-floating);
}

/* Grey theme: neutral post styling */
[data-theme="grey"] .post {
  border-top: 1px solid var(--glow-border);
  box-shadow: var(--shadow-card);
  background: var(--post-bg);
}

[data-theme="grey"] .post:hover {
  box-shadow: var(--shadow-elevated);
  background: var(--bg-surface-alt);
}

/* Grey theme: neutral header */
[data-theme="grey"] header {
  box-shadow: var(--header-glow);
  border-bottom-color: transparent;
}

/* Grey theme: titles */
[data-theme="grey"] .topic-title,
[data-theme="grey"] h1,
[data-theme="grey"] h2 {
  color: var(--text-main);
}

/* Grey theme: blockquotes */
[data-theme="grey"] .post-content blockquote {
  border-left-color: var(--quote-border);
  box-shadow: -2px 0 8px rgba(88, 101, 242, 0.06);
  background: var(--quote-bg);
}

/* Grey theme: focus ring */
[data-theme="grey"] :focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px var(--focus-ring-color),
    0 0 12px var(--accent-glow-soft);
}

/* Grey theme: link underlines */
[data-theme="grey"] .post-content a {
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) ease;
}

[data-theme="grey"] .post-content a:hover {
  text-decoration-color: var(--link-underline-hover);
}

/* ================================================================== */
/* ===  THEME: CUSTOM (User Hue Picker)                           === */
/* ===  Direction: HSL-driven, single --user-hue input             === */
/* ================================================================== */

[data-theme="custom"] {
  color-scheme: dark;

  /* ═══ User-controlled hue — set via JS on <html> ═══ */
  /* Default: --user-hue: 210 (blue), overridden by style.setProperty */

  /* --- Surfaces (directement set par les vars) --- */
  --bg-body: var(--custom-bg, #101010);
  --bg-surface: var(--custom-secondary, #1a1a1a);
  --bg-surface-alt: var(--custom-surface-alt, #242424);
  --bg-surface-raised: var(--custom-surface-raised, #333333);
  /* Transparence appliquée en JS ou calc, ici fallback */
  --bg-header: var(--custom-header-bg, rgba(26, 26, 26, 0.92));
  --border-color: var(--custom-border, #333333);
  --surface-hover: var(--custom-primary-alpha-10, rgba(128, 128, 128, 0.1));
  --surface-overlay: rgba(0, 0, 0, 0.75);
  --border-subtle: var(--custom-primary-alpha-14, rgba(128, 128, 128, 0.15));
  --glass-surface: var(--custom-header-bg, rgba(26, 26, 26, 0.92));

  /* --- Typography (calculé en JS suivant la luminance du bg) --- */
  --text-main: var(--custom-text, #ffffff);
  --text-secondary: var(--custom-text-muted, #bbbbbb);
  --text-muted: var(--custom-text-muted, #888888);
  --text-link: var(--custom-primary, #38bdf8);
  /* On utilise l'accent comme base pour les liens */
  --text-link-hover: var(--custom-primary, #7dd3fc);

  /* --- Accent (Couleur principale configurée) --- */
  --accent-primary: var(--custom-primary, #38bdf8);
  --accent-text: var(--custom-primary, #38bdf8);
  --accent-secondary: var(--custom-primary-muted, #0284c7);
  --accent-danger: #ef4444;
  --accent-warning: #f59e0b;
  --accent-success: #10b981;
  --accent-blue: var(--custom-primary, #38bdf8);

  /* --- Glow & tint tokens --- */
  /* Sans color-mix dans tous les vieux navigateurs, on fait un fake glow */
  --accent-glow: var(--custom-primary-alpha-28, rgba(56, 189, 248, 0.28));
  --accent-glow-soft: var(--custom-primary-alpha-14, rgba(56, 189, 248, 0.14));
  --accent-highlight: var(--custom-primary-alpha-08, rgba(56, 189, 248, 0.08));
  --surface-tint: var(--custom-primary-alpha-04, rgba(56, 189, 248, 0.04));
  --surface-tint-hover: var(
    --custom-primary-alpha-07,
    rgba(56, 189, 248, 0.07)
  );
  --surface-tint-active: var(
    --custom-primary-alpha-10,
    rgba(56, 189, 248, 0.1)
  );

  /* --- Components (secondary-based) --- */
  --quote-bg: var(--custom-surface-alt, #242424);
  --quote-border: var(--custom-primary, #38bdf8);
  --spoiler-bg: var(--custom-surface-raised, #333333);
  --input-bg: var(--custom-secondary, #1a1a1a);
  --input-border: transparent;
  --role-admin: #f87171;
  --role-admin-bg: rgba(248, 113, 113, 0.14);
  --role-mod: #34d399;
  --role-mod-bg: rgba(52, 211, 153, 0.15);

  /* --- Code blocks --- */
  --code-bg: var(--custom-primary-alpha-08, rgba(56, 189, 248, 0.06));
  --code-border: var(--custom-primary-alpha-14, rgba(56, 189, 248, 0.12));
  --code-text: var(--text-main);

  /* --- Link decoration --- */
  --link-underline: var(--custom-primary-alpha-28, rgba(56, 189, 248, 0.3));
  --link-underline-hover: var(
    --custom-primary-alpha-50,
    rgba(56, 189, 248, 0.6)
  );

  /* --- Header ambient glow --- */
  --header-glow:
    0 1px 0 var(--custom-primary-alpha-08, rgba(255, 255, 255, 0.05)),
    0 4px 20px rgba(0, 0, 0, 0.3);

  /* --- Shadows --- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.2);
  --shadow-elevated:
    0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-floating:
    0 8px 20px rgba(0, 0, 0, 0.5), 0 20px 50px rgba(0, 0, 0, 0.3);

  /* --- Glassmorphism --- */
  --glow-border: rgba(128, 128, 128, 0.15);
  --glow-shadow: 0 0 25px
    var(--custom-primary-alpha-14, rgba(56, 189, 248, 0.15));

  /* --- Topic & Post (secondary-based) --- */
  --topic-title-color: var(--custom-text, #ffffff);
  --topic-title-shadow: none;
  --post-content-color: var(--custom-secondary-text, var(--text-main));
  --post-bg: var(--custom-secondary, #1a1a1a);
  --post-border: var(--border-color);
  --bg-card: var(--custom-secondary, #242424);

  /* --- Validation tokens --- */
  --input-error-bg: rgba(248, 113, 113, 0.1);
  --input-error-border: #f87171;
  --input-error-text: #fca5a5;
  --input-success-bg: rgba(52, 211, 153, 0.12);
  --input-success-border: #34d399;
  --input-warning-bg: rgba(251, 191, 36, 0.12);
  --input-warning-border: #fbbf24;

  /* --- Modal --- */
  --modal-backdrop: rgba(0, 0, 0, 0.78);
  --modal-blur: blur(12px);
  --modal-card-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.3);

  /* --- Focus ring --- */
  --focus-ring-color: var(--custom-primary-alpha-50, rgba(56, 189, 248, 0.45));

  /* --- Misc compat --- */
  --primary-azure: var(--custom-primary, #38bdf8);
  --shadow-depth: var(--shadow-floating);
}

/* Custom theme: post styling */
[data-theme="custom"] .post {
  border-top: 1px solid var(--glow-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--post-bg);
}

[data-theme="custom"] .post:hover {
  box-shadow: var(--shadow-elevated);
  background: var(--bg-surface-alt);
}

/* Custom theme: header */
[data-theme="custom"] header {
  box-shadow: var(--header-glow);
  border-bottom-color: transparent;
}

/* Custom theme: blockquotes */
[data-theme="custom"] .post-content blockquote {
  border-left-color: var(--quote-border);
  box-shadow: -2px 0 8px hsla(var(--user-hue, 210) 72% 55% / 0.08);
  background: var(--quote-bg);
}

/* Custom theme: focus ring */
[data-theme="custom"] :focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px var(--focus-ring-color),
    0 0 12px var(--accent-glow-soft);
}

/* Custom theme: link underlines */
[data-theme="custom"] .post-content a {
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) ease;
}

[data-theme="custom"] .post-content a:hover {
  text-decoration-color: var(--link-underline-hover);
}

/* --- TEXTURE PAPIER SUPPRIMÉE (v8.0+) --- */
/* L'effet premium vient de la Céramique Organique : fond Avoine chaud (#F9F8F6) vs cartes blanches.
   Le bruit SVG sur fond clair = écran sale + GPU taxé pour zéro bénéfice. */
[data-theme="light-ether"]::before {
  display: none;
}

/* ===================================
   LIGHT ETHER v7 — Atmospheric Effects
   =================================== */

/* Warm sunlight gradient v7.5 — enhanced for deeper Papier Lin base.
   Two-layer warmth: pear glow (top center) + warm amber (top-right).
   Creates the feeling of natural light falling through a window. */
[data-theme="light-ether"] .main-content {
  background:
    radial-gradient(
      ellipse 70% 40% at 50% -5%,
      color-mix(in srgb, var(--primary-matcha) 6%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 30% at 80% -8%,
      rgba(245, 200, 80, 0.03) 0%,
      transparent 50%
    ),
    var(--bg-body);
  min-width: 0;
  min-height: 0;
}

/* Soft scroll fade — content emerges from warm ceramic background */
[data-theme="light-ether"] #posts-container {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30px,
    black calc(100% - 50px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30px,
    black calc(100% - 50px),
    transparent 100%
  );
}

/* --- Titres Magazine — kerning serré pour impact éditorial --- */
[data-theme="light-ether"] .topic-title,
[data-theme="light-ether"] h1,
[data-theme="light-ether"] h2 {
  color: #111827;
  letter-spacing: -0.02em;
}

/* --- UserCard Modal — ombre portée renforcée (détache du fond lumineux) --- */
[data-theme="light-ether"] #user-card-modal > div {
  box-shadow: var(--modal-card-shadow);
  border-color: rgba(26, 36, 27, 0.08);
}