/*
Theme Name: Bradem
Theme URI: https://www.bradem.fr
Author: Bradem
Description: Thème WooCommerce pour le bras de lavage démontable Bradem — design system Tech Premium (bleu profond, azur électrique, acier).
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bradem
Tags: woocommerce, tech, e-commerce
*/

/* ============================================================
   DESIGN SYSTEM — BRADEM v2 "Tech Premium"
   Palette extraite du logo : bleu marine + bleu azur + acier
   ============================================================ */
:root {

  /* ----- PRIMARY ----- */
  --color-deep:        #0F2A4D;  /* bleu marine profond (BRADEM dark) */
  --color-deep-soft:   #1B3B6F;  /* bleu marine secondaire */
  --color-ink:         #0A1929;  /* presque noir bleuté — texte */

  /* ----- ACCENT ----- */
  --color-azure:       #1B9CE0;  /* bleu azur (BRADEM bright) */
  --color-azure-light: #5FBEEC;  /* hover / accent doux */
  --color-cyan:        #00C2FF;  /* cyan électrique — CTA et highlights */
  --color-cyan-glow:   rgba(0, 194, 255, 0.4);

  /* ----- NEUTRAL (acier brossé) ----- */
  --color-steel:       #6B7E94;  /* gris acier moyen */
  --color-steel-dark:  #4A5A6E;  /* acier foncé */
  --color-steel-light: #B8C5D4;  /* acier clair */

  /* ----- SURFACE ----- */
  --color-mist:        #F4F8FC;  /* fond principal — bleu glacial très pâle */
  --color-frost:       #E6EFF8;  /* fond secondaire / cards */
  --color-snow:        #FFFFFF;  /* blanc pur */
  --color-cloud:       #DDE7F2;  /* divider / borders */

  /* ----- SEMANTIC ----- */
  --color-success:     #00B894;
  --color-warning:     #FFA940;
  --color-danger:      #E94560;

  /* ----- LEGACY ALIASES (pour ne pas casser le code existant) ----- */
  --color-earth:       var(--color-deep);
  --color-sage:        var(--color-azure);
  --color-sage-light:  var(--color-azure-light);
  --color-cream:       var(--color-mist);
  --color-terracotta:  var(--color-cyan);
  --color-terracotta-dark: var(--color-azure);
  --color-linen:       var(--color-frost);
  --color-charcoal:    var(--color-ink);
  --color-muted:       var(--color-steel);
  --color-white:       var(--color-snow);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Bricolage Grotesque', 'Familjen Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-accent:  'Bricolage Grotesque', Georgia, serif;

  /* ----- TYPE SCALE (fluid, mobile-first) ----- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.05rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --text-3xl:  clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
  --text-4xl:  clamp(3rem, 2.2rem + 3.5vw, 5.5rem);

  /* ============================================================
     SPACING (8-pt scale)
     ============================================================ */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ----- ALIASES LEGACY ----- */
  --space-xs:  var(--space-2);
  --space-sm:  var(--space-4);
  --space-md:  var(--space-8);
  --space-lg:  var(--space-16);
  --space-xl:  var(--space-24);
  --space-2xl: var(--space-32);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-width:        1320px;
  --max-width-text:   720px;
  --gutter:           clamp(1rem, 4vw, 2rem);

  /* ============================================================
     RADIUS — formes douces, technologiques
     ============================================================ */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* legacy */
  --border-radius:    var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* ============================================================
     ELEVATION — ombres teintées de bleu marine
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15, 42, 77, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 42, 77, 0.08), 0 1px 2px rgba(15, 42, 77, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 42, 77, 0.10), 0 2px 6px rgba(15, 42, 77, 0.06);
  --shadow-lg: 0 24px 48px rgba(15, 42, 77, 0.14), 0 8px 16px rgba(15, 42, 77, 0.08);
  --shadow-xl: 0 48px 96px rgba(15, 42, 77, 0.18);

  /* Glow azur — pour CTA et accents */
  --shadow-glow:     0 0 0 1px var(--color-cyan), 0 8px 32px var(--color-cyan-glow);
  --shadow-glow-lg:  0 0 0 2px var(--color-cyan), 0 16px 48px var(--color-cyan-glow);

  /* ============================================================
     GRADIENTS — eau & métal
     ============================================================ */
  --gradient-hero:       linear-gradient(135deg, var(--color-mist) 0%, var(--color-frost) 100%);
  --gradient-deep:       linear-gradient(140deg, var(--color-deep) 0%, var(--color-deep-soft) 100%);
  --gradient-azure:      linear-gradient(135deg, var(--color-azure) 0%, var(--color-cyan) 100%);
  --gradient-steel:      linear-gradient(180deg, var(--color-frost) 0%, var(--color-cloud) 100%);
  --gradient-water:      linear-gradient(180deg, var(--color-azure) 0%, var(--color-deep-soft) 100%);
  --gradient-radial-glow: radial-gradient(circle at 30% 20%, rgba(27, 156, 224, 0.15), transparent 60%);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow:   var(--duration-slow) var(--ease-out);

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ============================================================
   DARK SECTIONS — adaptation auto pour les sections sombres
   ============================================================ */
.theme-dark {
  --color-mist:    var(--color-deep);
  --color-frost:   var(--color-deep-soft);
  --color-snow:    var(--color-ink);
  --color-ink:     var(--color-mist);
  --color-steel:   var(--color-steel-light);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  :root {
    --color-deep: #000;
    --color-cyan: #000;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}