/* =========================================================
   MaBoutique Design Token Engine — 6 Core Themes
   Chaque theme impose sa propre identite visuelle:
   - typo (heading + body)
   - palette de fond / cards / borders / textes
   - radius / shadow / blur (materiau)
   - pattern de fond (subtil, pas decoratif)
   Le vendeur peut en plus surcharger les 3 couleurs
   --primary-color / --secondary-color / --text-color depuis
   la page Apparence; les themes ci-dessous ne les fixent
   pas (sauf Dark Premium qui a besoin d'un overrideOr pale).
   Fonts: chargees depuis Google Fonts via main.css @import.
   ========================================================= */

/* ----------------------------------------------------------------
   1. MINIMALISTE — épuré haut de gamme (Registre Indigo defaut)
   ------------------------------------------------------------
   Patate: studio de conseil premium, hairlines fines, typo
   Outfit tranchée, papier chaud. Tout est plateforme.
   ---------------------------------------------------------------- */
[data-theme="minimaliste"], body:not([data-theme]) {
  --radius: 4px;
  --shadow: 0 1px 0 oklch(0.18 0.008 264 / 0.04);
  --blur: 0px;
  --spacing-density: 1.25rem;
  --animation-level: 0.2s ease;
  --bg-color: oklch(0.97 0.012 85);
  --card-bg: oklch(0.99 0.006 85);
  --card-border: 1px solid oklch(0.88 0.008 85);
  --text-main: oklch(0.18 0.008 264);
  --text-muted: oklch(0.48 0.018 264);
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  /* pattern : très subtil, hairlines qu'on voit rien mais on sent */
  --bg-pattern:
    repeating-linear-gradient(0deg, transparent 0 39px, oklch(0.92 0.008 85 / 0.5) 39px 40px);
}

/* ----------------------------------------------------------------
   2. GLASSMORPHISM — transparences et flou (digital premium)
   ------------------------------------------------------------
   Patate: SaaS moderne, profondeur par blur, surfaces
   translucides. Amit le bleu-violet contre l'indigo pour
   eviter confusion avec Minimaliste.
   ---------------------------------------------------------------- */
[data-theme="glassmorphism"] {
  --radius: 18px;
  --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  --blur: 14px;
  --spacing-density: 1.5rem;
  --animation-level: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  /* Background "aurora" : blobs de couleur très dilués sur fond
     presque blanc — pas un degrade decoratif mais un atmosphere */
  --bg-color: oklch(0.97 0.015 290);
  --bg-pattern:
    radial-gradient(60% 50% at 15% 20%, oklch(0.90 0.06 290 / 0.45), transparent 70%),
    radial-gradient(50% 40% at 85% 15%, oklch(0.92 0.05 200 / 0.40), transparent 70%),
    radial-gradient(70% 60% at 50% 90%, oklch(0.93 0.04 330 / 0.35), transparent 70%);
  --card-bg: oklch(0.99 0.005 290 / 0.70);
  --card-border: 1px solid oklch(1 0 0 / 0.85);
  --text-main: oklch(0.22 0.04 290);
  --text-muted: oklch(0.45 0.06 290);
  --font-heading: 'Manrope', system-ui, sans-serif;  /* geometric sans — distingué de l'Outfit du minimaliste */
  --font-body: 'Inter', sans-serif;
}

/* ----------------------------------------------------------------
   3. NEUMORPHISM — relief doux (soft app mobile)
   ------------------------------------------------------------
   Patate: tactility, surfaces extrudées, ambiance pastel.
   Typo Inter pour le côté app mobile. Le shadow est tout:
   combinaison de light/shadow pour extruder les cards.
   ---------------------------------------------------------------- */
[data-theme="neumorphism"] {
  --radius: 22px;
  --shadow: 8px 8px 16px oklch(0.85 0.01 230), -8px -8px 16px oklch(0.97 0.012 230);
  --blur: 0px;
  --spacing-density: 1.5rem;
  --animation-level: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --bg-color: oklch(0.92 0.010 230);
  --card-bg: oklch(0.92 0.010 230);
  --card-border: none;
  --text-main: oklch(0.30 0.02 230);
  --text-muted: oklch(0.55 0.02 230);
  --font-heading: 'Manrope', system-ui, sans-serif;  /* soft app — Manrope rime avec le relief doux */
  --font-body: 'Inter', sans-serif;
  /* Inset shadow pour les inputs/boutons — application via
     la classe .neumorphic-inset (ajoutée aux composants clés) */
}

/* ----------------------------------------------------------------
   4. VIBRANT / BOLD — streetwear (couleurs vives, hard edges)
   ------------------------------------------------------------
   Patate: graphique brutal, type condensée, noirs et jaunes
   flashy, border épais, halo brutal. Pour boutique streetwear,
   sneakers, culture urbaine, accessoires pop.
   ---------------------------------------------------------------- */
[data-theme="vibrant"] {
  --radius: 0px;
  --shadow: 5px 5px 0px oklch(0.20 0.01 264);
  --blur: 0px;
  --spacing-density: 1rem;
  --animation-level: 0.15s steps(4, end);
  --bg-color: oklch(0.97 0.05 85);              /* jaune pâle flashy */
  --bg-pattern:
    repeating-linear-gradient(45deg, transparent 0 19px, oklch(0.94 0.07 85 / 0.5) 19px 20px);
  --card-bg: oklch(1 0 0);
  --card-border: 3px solid oklch(0.20 0.01 264);
  --text-main: oklch(0.15 0.01 264);
  --text-muted: oklch(0.40 0.02 264);
  /* Typo condensée/bold pour incarner le streetwear.
     Archivo Black = graisse max + condensé — brutal,
     opposé polaire de l'Outfit du minimaliste. */
  --font-heading: 'Archivo Black', 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ----------------------------------------------------------------
   5. CLASSIQUE CHALEUREUX — éditorial serif (artisanat, food)
   ------------------------------------------------------------
   Patate: livre ancien, papier jauni, serif lisible, ambiance
   tissu et huile. La typo Fraunces (serif) en headings change
   radicalement la perception vs les autres themes.
   ---------------------------------------------------------------- */
[data-theme="classique"] {
  --radius: 10px;
  --shadow: 0 4px 14px oklch(0.40 0.04 50 / 0.08);
  --blur: 0px;
  --spacing-density: 1.25rem;
  --animation-level: 0.3s ease;
  --bg-color: oklch(0.96 0.012 70);             /* papier jauni chaud */
  --bg-pattern:
    repeating-linear-gradient(0deg, transparent 0 23px, oklch(0.92 0.012 70 / 0.45) 23px 24px);
  --card-bg: oklch(0.99 0.005 70);
  --card-border: 1px solid oklch(0.88 0.012 60);
  --text-main: oklch(0.30 0.04 50);             /* brun chaud profond */
  --text-muted: oklch(0.50 0.04 40);
  /* Fraunces est importée via main.css @import dédié (serif display) */
  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', sans-serif;             /* body reste sans-serif pour lisibilité mobile */
}

/* ----------------------------------------------------------------
   6. DARK PREMIUM — sombre, or et néon (luxe nocturne)
   ------------------------------------------------------------
   Patate: cocktail bar, or sur night, accents néon. Le seul
   theme sombre. --primary-color s'éclaire automatiquement
   pour garder le contraste sur fond quasi-noir.
   ---------------------------------------------------------------- */
[data-theme="dark_premium"] {
  --radius: 12px;
  --shadow: 0 10px 30px oklch(0.05 0.01 264 / 0.50);
  --blur: 8px;
  --spacing-density: 1.5rem;
  --animation-level: 0.3s ease;
  --bg-color: oklch(0.14 0.015 264);
  --bg-pattern:
    radial-gradient(40% 30% at 80% 10%, oklch(0.20 0.06 280 / 0.50), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, oklch(0.18 0.05 200 / 0.40), transparent 70%);
  --card-bg: oklch(0.19 0.015 264);
  --card-border: 1px solid oklch(0.30 0.02 264);
  --text-main: oklch(0.95 0.012 85);
  --text-muted: oklch(0.65 0.020 264);
  /* Accents theme-specific — or pale par défaut mais le vendeur peut override */
  --color-accent: oklch(0.80 0.055 85);
  --color-success: oklch(0.75 0.18 145);          /* vert néon */
  --color-warning: oklch(0.82 0.18 85);
  --color-danger: oklch(0.65 0.22 25);
  --font-heading: 'Manrope', system-ui, sans-serif;  /* élégance nocturne — Manrope passe bien sur fond sombre */
  --font-body: 'Inter', sans-serif;
}

/* =================================================================
   APPLICATION DES PATTERNS & MATERIAUX
   Le --bg-pattern est applique en background-image (par dessus
   la --bg-color) pour ne pas masquer la couleur de fond vendor.
   ================================================================= */
[data-theme] body, body[data-theme], body:not([data-theme]) {
  background-color: var(--bg-color);
  background-image: var(--bg-pattern, none);
  background-attachment: fixed;  /* le pattern reste stable au scroll */
  background-repeat: no-repeat;  /* les radial-gradients se positionnent eux-mêmes */
}

/* Inputs/boutons en neumorphic inset (theme neumorphism uniquement) */
[data-theme="neumorphism"] .form-control,
[data-theme="neumorphism"] .btn-outline {
  box-shadow: inset 4px 4px 8px oklch(0.85 0.01 230), inset -4px -4px 8px oklch(0.97 0.012 230) !important;
  border: none !important;
  background: oklch(0.92 0.010 230) !important;
}

/* Boutons primary en vibrant : halo brutal via box-shadow offset */
[data-theme="vibrant"] .btn-primary {
  box-shadow: 4px 4px 0 oklch(0.15 0.01 264) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
}

/* Cards glassmorphism : backdrop-filter pour activer le blur */
[data-theme="glassmorphism"] .product-card,
[data-theme="glassmorphism"] .navbar,
[data-theme="glassmorphism"] form[style*="background"] {
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}

/* ----------------------------------------------------------------
   Glassmorphism — enrichissement composants (2026-08-09)
   Registre Indigo : translucidité oklch alpha, hairline blanche,
   shadow douce. Pas de dégradé décoratif, pas de vert, pas d'emoji.
   On réutilise les tokens déjà posés par le thème (--card-bg,
   --card-border, --blur, --shadow) — pas de valeurs en dur.
   ---------------------------------------------------------------- */

/* Navbar sticky en verre : translucide + hairline claire en bas
   Le --card-bg est déjà alpha 0.70 ; on active le blur + adoucit
   la border-bottom pour que la navbar flotte sur le pattern aurora. */
[data-theme="glassmorphism"] .navbar {
  background: oklch(0.99 0.005 290 / 0.55);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border-bottom: 1px solid oklch(1 0 0 / 0.55);
  box-shadow: 0 4px 24px 0 oklch(0.40 0.04 290 / 0.08);
}

/* Modal : la surface se pose comme une plaque de verre par dessus
   le fond aurora. Border-en-halo léger + shadow profonde pour le
   relief. Les modales du storefront (product detail modale + cart
   drawer) héritent de cette surface. */
[data-theme="glassmorphism"] .modal-content {
  background: oklch(0.99 0.005 290 / 0.72);
  backdrop-filter: blur(calc(var(--blur) * 1.4)) saturate(170%);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 1.4)) saturate(170%);
  border: 1px solid oklch(1 0 0 / 0.72);
  box-shadow:
    0 24px 64px -12px oklch(0.30 0.06 290 / 0.28),
    0 2px 8px 0 oklch(0.40 0.04 290 / 0.10);
}

/* Cart drawer : coulisse en verre. Same token philosophy que le
   modal car même role : surcouche translucide posée sur le fond. */
[data-theme="glassmorphism"] .cart-drawer {
  background: oklch(0.99 0.005 290 / 0.78);
  backdrop-filter: blur(calc(var(--blur) * 1.2)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 1.2)) saturate(160%);
  border-left: 1px solid oklch(1 0 0 / 0.65);
  box-shadow: -12px 0 48px -8px oklch(0.30 0.06 290 / 0.18);
}
[data-theme="glassmorphism"] .cart-header {
  border-bottom: 1px solid oklch(1 0 0 / 0.45);
}

/* Sidebar dashboard en verre (translucide, pas opaque) —
   careful : le dashboard reset pas le body data-theme (le theme
   est posé sur le body storefront uniquement). Celui-ci ne s'applique
   que si le vendor a configuré glassmorphism ET visite son dashboard
   via une page qui pose data-theme sur le body. Sinon no-op. */
[data-theme="glassmorphism"] .sidebar {
  background: oklch(0.99 0.005 290 / 0.55);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border-right: 1px solid oklch(1 0 0 / 0.45);
}
[data-theme="glassmorphism"] .sidebar-link {
  background: transparent;
}
[data-theme="glassmorphism"] .sidebar-link:hover {
  background: oklch(1 0 0 / 0.35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* Boutons : version glass — le .btn-primary devient une surface
   translucide teintée d'indigo, le .btn-outline perd son border
   dur pour un hairline clairComme les boutons sont CTAs, on garde
   un contraste suffisant (texte indigo prononcé) pour la lisbilité. */
[data-theme="glassmorphism"] .btn-primary {
  background: oklch(0.42 0.13 264 / 0.82);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  color: oklch(0.99 0.005 290) !important;
  border: 1px solid oklch(1 0 0 / 0.28);
  box-shadow:
    0 4px 16px -4px oklch(0.30 0.08 264 / 0.32),
    inset 0 1px 0 0 oklch(1 0 0 / 0.22);
}
[data-theme="glassmorphism"] .btn-primary:hover {
  background: oklch(0.36 0.10 264 / 0.92);
  box-shadow:
    0 8px 24px -4px oklch(0.30 0.08 264 / 0.42),
    inset 0 1px 0 0 oklch(1 0 0 / 0.30);
}
[data-theme="glassmorphism"] .btn-outline {
  background: oklch(0.99 0.005 290 / 0.45);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid oklch(0.42 0.13 264 / 0.55);
  color: oklch(0.32 0.10 264);
}
[data-theme="glassmorphism"] .btn-outline:hover {
  background: oklch(0.42 0.13 264 / 0.18);
  border-color: oklch(0.42 0.13 264 / 0.85);
  color: oklch(0.32 0.10 264);
}

/* Product-card en glass — la card de base (main.css L408) a déjà
   le backdrop-filter générique via --blur, mais on substitute le
   border et shadow pour la profondeur glass. La hairline blanche
   + shadow indigo douce = signature glassmorphism. */
[data-theme="glassmorphism"] .product-card {
  background: oklch(0.99 0.005 290 / 0.62);
  border: 1px solid oklch(1 0 0 / 0.62);
  box-shadow:
    0 10px 32px -12px oklch(0.30 0.06 290 / 0.22),
    0 1px 0 0 oklch(1 0 0 / 0.45);
}
[data-theme="glassmorphism"] .product-card:hover {
  border-color: oklch(1 0 0 / 0.82);
  box-shadow:
    0 24px 48px -16px oklch(0.30 0.08 290 / 0.32),
    0 2px 0 0 oklch(1 0 0 / 0.60);
}

/* Form controls en glass — les inputs adoptent la surface
   translucide au lieu d'un fond plein. Hairline claire. */
[data-theme="glassmorphism"] .form-control {
  background: oklch(0.99 0.005 290 / 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid oklch(1 0 0 / 0.45);
}
[data-theme="glassmorphism"] .form-control:focus {
  border-color: oklch(0.42 0.13 264 / 0.65);
  box-shadow:
    0 0 0 3px oklch(0.42 0.13 264 / 0.15),
    0 4px 12px -4px oklch(0.30 0.06 290 / 0.18);
  background: oklch(0.99 0.005 290 / 0.72);
}

/* Backdrop modal — juste un peu plus flou pour lather le fond store */
[data-theme="glassmorphism"] .modal-backdrop.active {
  background: oklch(0.18 0.02 290 / 0.28);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
}

/* Bust mobile : si le navigateur ne supporte pas backdrop-filter
   (Firefox < 70 par ex), fallback — on assombrit l'alpha pour
   garder le contraste lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="glassmorphism"] .navbar,
  [data-theme="glassmorphism"] .modal-content,
  [data-theme="glassmorphism"] .cart-drawer,
  [data-theme="glassmorphism"] .sidebar,
  [data-theme="glassmorphism"] .product-card,
  [data-theme="glassmorphism"] .btn-primary,
  [data-theme="glassmorphism"] .btn-outline,
  [data-theme="glassmorphism"] .form-control {
    background: oklch(0.99 0.005 290 / 0.92);
  }
}

/* Headings en Fraunces pour le theme classique : vraiment serif partout */
[data-theme="classique"] h1,
[data-theme="classique"] h2,
[data-theme="classique"] h3,
[data-theme="classique"] .product-title {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Dark Premium : les textes vendor kindly s'auto-éclaircissent
   si le vendeur a laissé des couleurs sombres par défaut.
   On surcharge le --card-border pour un relief subtil doré. */
[data-theme="dark_premium"] {
  --card-border: 1px solid oklch(0.30 0.02 264 / 0.6);
}
[data-theme="dark_premium"] .btn-primary {
  /* le CTA devient or энергия — indigo profond perd trop de contraste sur quasi-noir.
     La bascule CTA->or est explicitée dans DESIGN.md (mode sombre). */
  background: var(--color-accent) !important;
  color: oklch(0.14 0.015 264) !important;
}
[data-theme="dark_premium"] .badge-success {
  background: oklch(0.75 0.18 145 / 0.15) !important;
  color: oklch(0.85 0.15 145) !important;
}