/* =========================================================
   Mathos Locos — Direction artistique 2025 (Flat, no gradients)
   Palette basée sur Pantone 2025 & WGSN/Coloro 25/26
   ========================================================= */
:root{
  /* --- Core brand (Future Dusk) ---------------------------------- */
  --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 ≈ #4C5578) */
  --primary-700: #454e71;
  --primary-800: #3d4666;
  --primary-900: #2a304a;

  /* --- Accents ---------------------------------------------------- */
  --accent-mint:   #96d8bb; /* Jelly Mint (Coloro 078-80-22) */
  --accent-yellow: #edeab1; /* Celestial Yellow (Coloro 048-90-17 ≈) */
  --accent-brown:  #a47864; /* PANTONE 17-1230 Mocha Mousse */

  /* Gold accents (aligned to logo SVG) */
  --brand-gold: #E3B333;       /* mid gold */
  --brand-gold-dark: #8C6B1F;  /* dark stroke */
  --accent-gold-start: #FFF6BF;
  --accent-gold-mid:   #E3B333;
  --accent-gold-end:   #8C6B1F;
  --accent-gold-stroke:#8C6B1F;
  /* 4-stop gradient to mirror SVG goldFill */
  --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%);
  /* darker, subdued gold for UI accents */
  --accent-gold-grad-dark: linear-gradient(90deg, #E3B333 0%, #8C6B1F 100%);
  --accent-gold-grad-180-dark: linear-gradient(180deg, #E3B333 0%, #8C6B1F 100%);

  /* --- Surfaces & text ------------------------------------------- */
  --page-bg:   #f7f7f5;    /* Porcelain */
  --surface:   #ffffff;    /* Cards */
  --elevated:  #ffffff;
  --on-surface:#111418;
  --muted:     #5b6068;
  --border:    #e4e3dd;

  /* Replace all gradient tokens by FLAT (solid) versions */
  --ml-grad: linear-gradient(0deg, var(--primary-600), var(--primary-600));
  /* Keep accent as violet regardless of primary theme */
  --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: #e9e7e2;
  /* Tokens (coins): gold gradient for strong differentiation */
  --bar-grad-token: linear-gradient(90deg, #E3B333, #8C6B1F);
  /* Matière grise: neutral gray (non‑bluish) */
  --bar-grad-grise: linear-gradient(90deg, #8E8E8E, #4B4B4B);

  /* “Galet” header & cards (no noisy gradients) */
  --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);

  /* Radius tuning (slightly more contemporary) */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* Borders & shadows */
  --shadow-s: 0 1px 2px rgb(17 20 24 / 6%), 0 1px 1px rgb(17 20 24 / 3%);
  --shadow-m: 0 4px 10px rgb(17 20 24 / 10%);
  --shadow-xl: 0 12px 30px rgb(17 20 24 / 12%);

  /* Legacy neon palette remapped to the new scheme (for safety) */
  --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 refined */
  --clr-accent: var(--accent-mint);
  --clr-accent-rgb: 150, 216, 187;
  --clr-success: #1e8e6a;
  --clr-warning: #b97200;
  --clr-danger:  #7c2a38; /* Cherry Lacquer mood */
}

/* 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);
  border: 1px solid rgb(255 255 255 / 0);
  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); color: var(--primary-800); 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); }

/* -----------------------------------------------------------------
   Mode compact — déclenché lorsque la hauteur du viewport est faible
   tout en restant sur un affichage desktop (>= 1024px).
   Les variables définies ici sont consommées par les layouts pour
   réduire subtilement les espacements verticaux et libérer de l'espace.
   ----------------------------------------------------------------- */
@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; }
}