/* =========================================================
   Mathos Locos — Theme system (dark default + light override)
   Palette based on Pantone 2025 & WGSN/Coloro 25/26
   ========================================================= */
:root{
  color-scheme: dark;

  /* --- Core brand palette (constant) ----------------------- */
  --primary-50:  #f2f4f8;
  --primary-100: #e6e9f2;
  --primary-200: #cfd5e5;
  --primary-300: #aeb7d2;
  --primary-400: #8896bd;
  --primary-500: #6577a0;
  --primary-600: #4c5578; /* Future Dusk (Coloro 129-35-18) */
  --primary-700: #454e71;
  --primary-800: #3d4666;
  --primary-900: #2a304a;

  --accent-mint:   #96d8bb;
  --accent-yellow: #edeab1;
  --accent-brown:  #a47864;

  --brand-gold: #E3B333;
  --brand-gold-dark: #8C6B1F;
  --accent-gold-start: #FFF6BF;
  --accent-gold-mid:   #E3B333;
  --accent-gold-end:   #8C6B1F;
  --accent-gold-stroke:#8C6B1F;
  --accent-gold-grad:  linear-gradient(90deg, #FFF6BF 0%, #FFD54D 40%, #E3B333 60%, #8C6B1F 100%);
  --accent-gold-grad-180: linear-gradient(180deg, #FFF6BF 0%, #FFD54D 40%, #E3B333 60%, #8C6B1F 100%);
  --accent-gold-grad-dark: linear-gradient(90deg, #E3B333 0%, #8C6B1F 100%);
  --accent-gold-grad-180-dark: linear-gradient(180deg, #E3B333 0%, #8C6B1F 100%);

  --accent-cyan: #22d3ee;
  --accent-purple: #8b5cf6;
  --accent-green: #22c55e;
  --accent-gold: #f59e0b;
  --accent-blue: #3b82f6;
  --accent-rose: #f43f5e;
  --accent-cyan-rgb: 34 211 238;
  --accent-purple-rgb: 139 92 246;
  --accent-green-rgb: 34 197 94;
  --accent-gold-rgb: 245 158 11;
  --accent-blue-rgb: 59 130 246;
  --accent-rose-rgb: 244 63 94;

  /* --- Core surfaces (dark default) ------------------------ */
  --page-bg: #0b1224;
  --page-bg-strong: #090f1f;
  --page-bg-soft: #111a2f;
  --surface: #111827;
  --elevated: #0f172a;
  --on-surface: #e5e7eb;
  --muted: #94a3b8;
  --border: #1f2a44;
  --border-strong: #2b3954;
  --overlay-bg: rgba(3, 9, 20, 0.7);

  /* App semantic tokens */
  --app-bg: var(--page-bg);
  --app-bg-strong: var(--page-bg-strong);
  --app-bg-soft: var(--page-bg-soft);
  --app-surface: var(--surface);
  --app-surface-strong: #0f172a;
  --app-surface-weak: rgba(15, 23, 42, 0.6);
  --app-border: rgba(148, 163, 184, 0.18);
  --app-border-strong: rgba(148, 163, 184, 0.3);
  --app-text: var(--on-surface);
  --app-muted: var(--muted);
  --app-dim: #64748b;
  --app-primary: var(--accent-purple);
  --app-primary-strong: #a78bfa;
  --app-accent-cyan: var(--accent-cyan);
  --app-accent-purple: var(--accent-purple);
  --app-accent-green: var(--accent-green);
  --app-accent-gold: var(--accent-gold);
  --app-accent-blue: var(--accent-blue);
  --app-accent-rose: var(--accent-rose);
  --app-danger: #f87171;
  --app-warning: #f59e0b;
  --app-success: #22c55e;
  --app-ink: #0b0f1a;
  --app-contrast-bg: #ffffff;
  --app-contrast-ink: #0b0f1a;

  --app-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
  --app-shadow-strong: 0 28px 60px rgba(2, 6, 23, 0.55);

  --text-muted: var(--app-muted);
  --text-dim: var(--app-dim);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.15);
  --card-bg-hover: rgba(30, 41, 59, 0.6);
  --card-icon-bg: rgba(255, 255, 255, 0.05);
  --card-icon-border: rgba(255, 255, 255, 0.05);
  --card-pill-bg: rgba(255, 255, 255, 0.1);
  --ring-track: rgba(255, 255, 255, 0.1);
  --accent-sweep: linear-gradient(135deg, var(--app-accent-green) 0%, var(--app-accent-blue) 50%, var(--app-accent-cyan) 100%);

  /* Replace all gradient tokens by flat versions */
  --ml-grad: linear-gradient(0deg, var(--primary-600), var(--primary-600));
  --accent-grad: linear-gradient(0deg, #6d28d9, #6d28d9);
  --brand-grad: var(--ml-grad);
  --primary-grad: var(--ml-grad);
  --color-primary-gradient: var(--ml-grad);

  /* Progress bars / meters */
  --bar-bg: rgba(148, 163, 184, 0.18);
  --bar-grad-token: linear-gradient(90deg, #E3B333, #8C6B1F);
  --bar-grad-grise: linear-gradient(90deg, #8E8E8E, #4B4B4B);

  /* "Galet" surfaces */
  --galet-bg: rgba(15, 23, 42, 0.72);
  --galet-bg-bright: rgba(15, 23, 42, 0.9);
  --galet-border: 1px solid rgba(255, 255, 255, 0.08);
  --galet-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --galet-shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.45);

  /* Radius tuning */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* Shadows */
  --shadow-s: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow-m: 0 4px 12px rgb(0 0 0 / 35%);
  --shadow-xl: 0 12px 30px rgb(0 0 0 / 45%);

  /* Legacy neon palette remapped */
  --brand-50:  var(--primary-50);
  --brand-100: var(--primary-100);
  --brand-200: var(--primary-200);
  --brand-300: var(--primary-300);
  --brand-400: var(--primary-400);
  --brand-500: var(--primary-500);
  --brand-600: var(--primary-600);
  --brand-700: var(--primary-700);
  --brand-800: var(--primary-800);
  --brand-900: var(--primary-900);
  --brand-600-rgb: 76 85 120;

  /* Status colors */
  --clr-accent: var(--accent-mint);
  --clr-accent-rgb: 150, 216, 187;
  --clr-success: #22c55e;
  --clr-warning: #f59e0b;
  --clr-danger:  #f87171;
  --status-never: #d64545;
  --status-seen: #374151;
  --status-review: #2b6cb0;
  --status-mastered: #19a974;

  /* Shell + nav */
  --shell-panel-bg: rgba(8, 12, 26, 0.85);
  --shell-panel-border: 1px solid rgba(255, 255, 255, 0.08);
  --shell-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shell-panel-blur: 18px;

  --nav-rail-bg: rgba(8, 12, 26, 0.85);
  --nav-rail-border: rgba(255, 255, 255, 0.08);
  --nav-rail-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
  --nav-rail-shadow-expanded: 14px 0 36px rgba(0, 0, 0, 0.4);
  --nav-rail-link: #94a3b8;
  --nav-rail-link-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-rail-link-hover-border: rgba(255, 255, 255, 0.12);
  --nav-rail-link-active: #fff;
  --nav-rail-link-active-bg: linear-gradient(135deg, rgb(var(--accent-green-rgb) / 0.15), rgb(var(--accent-blue-rgb) / 0.15));
  --nav-rail-link-active-border: rgb(var(--accent-blue-rgb) / 0.3);
  --nav-rail-brand-gradient: linear-gradient(135deg, #fff, #94a3b8);
  --nav-rail-brand-underline: var(--app-accent-cyan);
  --nav-rail-brand-underline-glow: rgb(var(--accent-cyan-rgb) / 0.75);
  --nav-rail-icon-bg: linear-gradient(135deg, var(--app-accent-green), var(--app-accent-blue));
  --nav-rail-icon-border: rgba(255, 255, 255, 0.15);
  --nav-rail-icon-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);

  --nav-canon-bg: rgba(2, 6, 23, 0.6);
  --nav-canon-border: rgba(255, 255, 255, 0.08);
  --nav-canon-shadow: 14px 0 38px rgba(0, 0, 0, 0.45);
  --nav-canon-link: #94a3b8;
  --nav-canon-link-hover-bg: rgba(255, 255, 255, 0.05);
  --nav-canon-link-active-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  --nav-canon-link-active-border: rgba(255, 255, 255, 0.1);
  --nav-canon-link-active-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
  --nav-canon-link-indicator: var(--app-accent-purple);
  --nav-canon-link-indicator-glow: rgb(var(--accent-purple-rgb) / 0.9);
  --nav-canon-icon-bg: rgba(255, 255, 255, 0.04);
  --nav-canon-cta-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.35));
  --nav-canon-cta-border: rgba(148, 163, 184, 0.22);
  --nav-canon-cta-text: #e2e8f0;
  --nav-canon-cta-hover-bg: linear-gradient(135deg, rgb(var(--accent-cyan-rgb) / 0.2), rgb(var(--accent-green-rgb) / 0.18));
  --nav-canon-cta-hover-border: rgba(148, 163, 184, 0.35);
  --nav-canon-cta-shadow: 0 10px 18px rgba(15, 23, 42, 0.35);
  --nav-canon-cta-icon-bg: rgba(15, 23, 42, 0.5);
  --nav-canon-cta-icon-border: rgba(148, 163, 184, 0.18);

  --nav-float-bg: rgba(15, 23, 42, 0.85);
  --nav-float-border: rgba(255, 255, 255, 0.08);
  --nav-float-shadow: 0 20px 40px rgba(0,0,0,0.4);
  --nav-float-link: var(--nav-rail-link);
  --nav-float-link-active: #fff;

  /* Grid overlay */
  --grid-size: 60px;
  --grid-line-color: rgba(255, 255, 255, 0.04);
  --grid-mask: radial-gradient(circle, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 85%);
  --grid-opacity: 1;
}

:root[data-theme="light"],
[data-theme="light"]{
  color-scheme: light;

  --page-bg: #f7f7f5;
  --page-bg-strong: #f2f1ed;
  --page-bg-soft: #ffffff;
  --surface: #ffffff;
  --elevated: #ffffff;
  --on-surface: #111418;
  --muted: #5b6068;
  --border: #e4e3dd;
  --border-strong: #d6d5cf;
  --overlay-bg: rgba(15, 23, 42, 0.35);

  --app-surface-strong: #ffffff;
  --app-surface-weak: rgba(255, 255, 255, 0.7);
  --app-border: rgba(17, 20, 24, 0.08);
  --app-border-strong: rgba(17, 20, 24, 0.16);
  --app-text: #111418;
  --app-muted: #5b6068;
  --app-dim: #6b7280;
  --app-primary: var(--primary-600);
  --app-primary-strong: var(--primary-700);
  --accent-blue: #2563eb;
  --accent-blue-rgb: 37 99 235;
  --accent-rose: #e11d48;
  --accent-rose-rgb: 225 29 72;
  --app-accent-blue: #2563eb;
  --app-accent-rose: #e11d48;
  --app-danger: #b91c1c;
  --app-warning: #b45309;
  --app-success: #15803d;
  --app-ink: #111418;
  --app-contrast-bg: #111418;
  --app-contrast-ink: #f8fafc;

  --app-shadow: 0 12px 30px rgba(17, 20, 24, 0.12);
  --app-shadow-strong: 0 18px 40px rgba(17, 20, 24, 0.18);

  --border-subtle: rgba(15, 23, 42, 0.12);
  --border-highlight: rgba(15, 23, 42, 0.2);
  --card-bg-hover: rgba(15, 23, 42, 0.04);
  --card-icon-bg: rgba(15, 23, 42, 0.05);
  --card-icon-border: rgba(15, 23, 42, 0.08);
  --card-pill-bg: rgba(15, 23, 42, 0.08);
  --ring-track: rgba(15, 23, 42, 0.12);

  --bar-bg: #e9e7e2;

  --galet-bg: var(--surface) padding-box;
  --galet-bg-bright: var(--surface) padding-box;
  --galet-border: 1px solid rgb(0 0 0 / 6%);
  --galet-shadow: 0 10px 30px rgba(17,20,24,.08);
  --galet-shadow-strong: 0 20px 50px rgba(17,20,24,.12);

  --shell-panel-bg: rgba(255, 255, 255, 0.88);
  --shell-panel-border: 1px solid rgba(17, 20, 24, 0.08);
  --shell-panel-shadow: 0 10px 30px rgba(17, 20, 24, 0.12);

  --nav-rail-bg: rgba(255, 255, 255, 0.9);
  --nav-rail-border: rgba(17, 20, 24, 0.08);
  --nav-rail-shadow: 10px 0 30px rgba(17, 20, 24, 0.12);
  --nav-rail-shadow-expanded: 14px 0 36px rgba(17, 20, 24, 0.18);
  --nav-rail-link: #475569;
  --nav-rail-link-hover-bg: rgba(15, 23, 42, 0.05);
  --nav-rail-link-hover-border: rgba(15, 23, 42, 0.12);
  --nav-rail-link-active: #111418;
  --nav-rail-link-active-bg: linear-gradient(135deg, rgba(76, 85, 120, 0.12), rgba(139, 92, 246, 0.12));
  --nav-rail-link-active-border: rgba(76, 85, 120, 0.3);
  --nav-rail-brand-gradient: linear-gradient(135deg, #111418, #64748b);
  --nav-rail-brand-underline: #4c5578;
  --nav-rail-brand-underline-glow: rgba(76, 85, 120, 0.45);
  --nav-rail-icon-bg: linear-gradient(135deg, #4c5578, #7c3aed);
  --nav-rail-icon-border: rgba(17, 20, 24, 0.12);
  --nav-rail-icon-shadow: 0 10px 24px rgba(17, 20, 24, 0.18);

  --nav-canon-bg: rgba(255, 255, 255, 0.85);
  --nav-canon-border: rgba(15, 23, 42, 0.12);
  --nav-canon-shadow: 14px 0 38px rgba(17, 20, 24, 0.18);
  --nav-canon-link: #475569;
  --nav-canon-link-hover-bg: rgba(15, 23, 42, 0.06);
  --nav-canon-link-active-bg: linear-gradient(135deg, rgba(76, 85, 120, 0.12), rgba(15, 23, 42, 0.05));
  --nav-canon-link-active-border: rgba(15, 23, 42, 0.18);
  --nav-canon-link-active-shadow: 0 0 20px rgba(76, 85, 120, 0.18);
  --nav-canon-link-indicator: #4c5578;
  --nav-canon-link-indicator-glow: rgba(76, 85, 120, 0.6);
  --nav-canon-icon-bg: rgba(15, 23, 42, 0.06);
  --nav-canon-cta-bg: linear-gradient(135deg, rgba(76, 85, 120, 0.12), rgba(15, 23, 42, 0.04));
  --nav-canon-cta-border: rgba(76, 85, 120, 0.3);
  --nav-canon-cta-text: #111418;
  --nav-canon-cta-hover-bg: linear-gradient(135deg, rgba(76, 85, 120, 0.2), rgba(15, 23, 42, 0.06));
  --nav-canon-cta-hover-border: rgba(76, 85, 120, 0.4);
  --nav-canon-cta-shadow: 0 10px 18px rgba(17, 20, 24, 0.14);
  --nav-canon-cta-icon-bg: rgba(76, 85, 120, 0.12);
  --nav-canon-cta-icon-border: rgba(76, 85, 120, 0.2);

  --nav-float-bg: rgba(255, 255, 255, 0.92);
  --nav-float-border: rgba(17, 20, 24, 0.1);
  --nav-float-shadow: 0 20px 40px rgba(17, 20, 24, 0.16);
  --nav-float-link: #475569;
  --nav-float-link-active: #111418;

  --grid-line-color: rgba(0, 0, 0, 0.06);
  --grid-mask: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 55%, transparent 85%);
  --grid-opacity: 0.9;
}

/* Global layout colors */
html, body{ background: var(--page-bg); color: var(--on-surface); }
body{ --compact-mode: 0; }
.card, .panel, .glass-panel { background: var(--surface); box-shadow: var(--shadow-m); border: 1px solid var(--galet-border); }
.card--elevated, .panel--elevated{ box-shadow: var(--galet-shadow); }

/* Buttons (flat & crisp) */
button, .btn{
  background: var(--primary-600);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, var(--shadow-s);
}
button:hover, .btn:hover{ filter: brightness(1.05); }
button:active, .btn:active{ filter: brightness(.98); transform: translateY(1px); }

/* Pills & chips */
.pill, .chip{ background: var(--brand-100); border: 1px solid var(--border); }

/* Tabs (remove gradient) */
.tab, .tabs .tab{ background: var(--surface); border-bottom: 2px solid transparent; }
.tab[aria-selected="true"], .tabs .tab[aria-selected="true"]{ border-color: var(--primary-600); color: var(--primary-800); }

/* Remove any legacy gradient classes by neutralizing them */
[class*="gradient"], .is-gradient, .gradient, .bg-gradient {
  background-image: none !important;
  background: var(--primary-600) !important;
}
.progress, .meter, .bar, .jauge, .progress-bar {
  background: var(--bar-bg);
  border-radius: 999px;
  overflow: hidden;
}
.progress > *,
.meter > *,
.bar > .fill,
.progress-bar > .fill{
  background: var(--primary-600) !important;
  background-image: none !important;
}

/* Specific background overrides */
body.board-page,
body.chapitres-page {
  background: var(--page-bg);
  background-image: none;
  min-height: 100svh;
}

/* -----------------------------------------------------------------
   Mode compact — déclenché lorsque la hauteur du viewport est faible
   tout en restant sur un affichage desktop (>= 1024px).
   ----------------------------------------------------------------- */
@media (max-height: 51.25rem) and (min-width: 64rem) {
  :root{
    --layout-container-height: auto;

    /* Global shell & card spacing */
    --page-shell-padding-block: clamp(0.8rem, 1.6vh, 1.1rem);
    --page-shell-padding-inline: clamp(0.9rem, 2.1vw, 1.4rem);
    --page-shell-gap: clamp(0.6rem, 1.8vh, 0.95rem);
    --panel-padding-block: clamp(0.7rem, 1.4vh, 1.05rem);
    --panel-padding-inline: clamp(0.85rem, 2vw, 1.35rem);
    --section-gap: clamp(0.55rem, 1.6vh, 0.9rem);
    --grid-gap: clamp(0.5rem, 1.4vh, 0.85rem);
    --card-padding-block: clamp(0.55rem, 1.2vh, 0.85rem);
    --card-padding-inline: clamp(0.75rem, 1.8vw, 1.15rem);
    --card-gap: clamp(0.45rem, 1.1vh, 0.7rem);

    /* Sidebars */
    --sidebar-padding-block: 1rem;
    --sidebar-padding-inline: 0.875rem;
    --sidebar-section-margin-start: 1.25rem;
    --sidebar-section-margin-end: 0.2rem;

    /* Fiche/exercice */
    --fiche-padding-block: 0.5rem;
    --fiche-padding-inline: 0.625rem;
    --fiche-gap: 1rem;
    --fiche-gap-tight: 0.45rem;
    --fiche-gap-tight-desktop: 0.3rem;
    --fiche-padding-top-desktop: 0.18rem;
    --header-section-padding-top: 0.26rem;
    --header-section-padding-bottom: 0.26rem;
    --header-section-padding-top-desktop: 0.22rem;
    --header-section-padding-bottom-desktop: 0.22rem;
    --enonce-padding-top: 0.3rem;
    --enonce-padding-top-desktop: 0.18rem;

    /* Progression & dashboards */
    --progression-margin-block: clamp(8px, 1.2vw, 18px);
    --progression-padding-block: 0.25rem;
    --toolbar-padding-block: 0.75rem;
    --toolbar-padding-inline: 1rem;
    --toolbar-gap: 0.75rem;
    --hero-padding-block: 0.85rem;
    --hero-padding-inline: 1.1rem;
    --hero-margin-top: 0.5rem;
    --hero-margin-bottom: 0.75rem;
    --hero-badges-gap: 0.4rem;
    --hero-badges-margin-start: .3rem;
    --hero-badges-margin-end: .5rem;
  }

  body{ --compact-mode: 1; }

  .container{ min-height: 100vh; }
}