/* BoxTech — Design system inspiré PulsedBox mood */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,400;1,9..40,700&display=swap');

:root {
  /* Layout */
  --container-width: min(1560px, 100% - 32px);
  --container-narrow: min(1200px, 100% - 32px);
  --gap: 16px;
  --gap-sm: 8px;
  --radius: 16px;
  --radius-sm: 8px;
  --global-border-radius: 16px;

  /* Typography */
  --font-base: "DM Sans", sans-serif;
  --text-base: 16px;
  --heading-weight: 800;
  --heading-transform: none;
  --button-font-family: "DM Sans", sans-serif;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-text-transform: none;
  --button-weight: 500;
  --button-size: 16px;

  /* Timing tokens (identiques PulsedBox) */
  --timing-micro: .1s;
  --timing-short: .2s;
  --timing-base: .4s;
  --timing-long: .7s;
  --timing-second: 1s;
  --easing-ease-out: cubic-bezier(0, 0, .09, 1);
  --easing-slov-in-fast-out: cubic-bezier(.6, .14, 0, 1);

  /* Global tokens (neutral) */
  --color-sale: #ff5053;
  --color-success: #36ba20;
  --color-attention: #e41616;
  --accent: #29b6f6;
  --accent-dark: #171513;
}

/* ============================================================
   Schema 1 — Dark (hero, promo, footer)
   ============================================================ */
.color-schema-1 {
  --text: #ffffff;
  --text-muted: #7b7b7b;
  --heading: #ffffff;
  --link: #ffffff;
  --bg: #000000;
  --bg-alpha: rgba(0, 0, 0, 0.9);
  --bg-popup: #212121;
  --border: #ffffff;
  --border-alpha: rgba(255, 255, 255, 0.16);

  /* Legacy tokens */
  --btn-text: #ffffff;
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-border: #ffffff;
  --btn-text-hover: #000000;
  --btn-bg-hover: #ffffff;
  --icon-circle: #ffffff;
  --icon-circle-hover: #000000;
  --slider-arrow: #ffffff;

  /* Button primary — dark context */
  --button-border-color-primary: #ffffff;
  --button-background-color-primary: rgba(255, 255, 255, 0.12);
  --button-text-color-primary: #ffffff;
  --button-border-color-primary-hover: #ffffff;
  --button-background-color-primary-hover: #ffffff;
  --button-text-color-primary-hover: #000000;
  /* Outer bracket decoration */
  --button-border-outer-color-primary: rgba(255, 255, 255, 0.7);
  --button-border-outer-alpha-color-primary: rgba(255, 255, 255, 0.18);
  --button-border-outer-color-primary-hover: #ffffff;
  --button-border-outer-alpha-color-primary-hover: rgba(255, 255, 255, 0.5);

  /* Button secondary (cart, etc.) */
  --button-border-color-secondary: rgba(255, 255, 255, 0.3);
  --button-background-color-secondary: transparent;
  --button-text-color-secondary: #ffffff;
  --button-background-color-secondary-hover: rgba(255, 255, 255, 0.12);
  --button-text-color-secondary-hover: #ffffff;

  /* Button-icon */
  --button-icon-text-color: #ffffff;
  --button-icon-border-color: rgba(255, 255, 255, 0.2);
  --button-icon-background-color: rgba(255, 255, 255, 0.1);
  --button-icon-border-outer-color: rgba(255, 255, 255, 0.8);
  --button-icon-border-outer-alpha-color: rgba(255, 255, 255, 0.2);
  --button-icon-text-color-hover: #000000;
  --button-icon-border-color-hover: #ffffff;
  --button-icon-background-color-hover: #ffffff;
  --button-icon-border-outer-alpha-color-hover: rgba(255, 255, 255, 0.6);
  --button-icon-counter-text-color: #ffffff;
  --button-icon-counter-background-color: var(--accent);

  /* Button-icon-circle */
  --button-icon-circle-text-color: #ffffff;
  --button-icon-circle-text-color-hover: #ffffff;

  /* Button-circle (product card add-to-cart) */
  --button-icon-color-circle: #ffffff;
  --button-background-color-circle: rgba(255, 255, 255, 0.24);
  --button-border-color-circle: #696868;
  --button-border-outer-color-circle: rgba(0, 0, 0, 0);
  --button-icon-color-circle-hover: #000000;
  --button-background-color-circle-hover: #ffffff;
  --button-border-color-circle-hover: #cccccc;
  --button-border-outer-color-circle-hover: rgba(0, 0, 0, 0);

  /* Header navigation item (mobile menu) */
  --header-navigation-item-text-color: #ffffff;
  --header-navigation-item-border-color: rgba(255, 255, 255, 0.12);
  --header-navigation-item-text-background-color-hover: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Schema 2 — Light (sections produits, texte)
   ============================================================ */
.color-schema-2 {
  --text: #000000;
  --text-muted: #7b7b7b;
  --heading: #000000;
  --link: #29b6f6;
  --bg: #ffffff;
  --bg-alpha: rgba(255, 255, 255, 0.9);
  --bg-popup: #ffffff;
  --border: #000000;
  --border-alpha: rgba(0, 0, 0, 0.16);

  /* Legacy tokens */
  --btn-text: #000000;
  --btn-bg: #ffffff;
  --btn-border: #000000;
  --btn-text-hover: #ffffff;
  --btn-bg-hover: #000000;
  --icon-circle: #000000;
  --icon-circle-hover: #000000;
  --slider-arrow: #000000;

  /* Button primary — light context */
  --button-border-color-primary: #000000;
  --button-background-color-primary: #ffffff;
  --button-text-color-primary: #000000;
  --button-border-color-primary-hover: #000000;
  --button-background-color-primary-hover: #000000;
  --button-text-color-primary-hover: #ffffff;
  /* Outer bracket */
  --button-border-outer-color-primary: rgba(0, 0, 0, 0.7);
  --button-border-outer-alpha-color-primary: rgba(0, 0, 0, 0.15);
  --button-border-outer-color-primary-hover: #000000;
  --button-border-outer-alpha-color-primary-hover: rgba(0, 0, 0, 0.4);

  /* Button secondary */
  --button-border-color-secondary: rgba(0, 0, 0, 0.3);
  --button-background-color-secondary: transparent;
  --button-text-color-secondary: #000000;
  --button-background-color-secondary-hover: rgba(0, 0, 0, 0.08);
  --button-text-color-secondary-hover: #000000;

  /* Button-icon */
  --button-icon-text-color: #000000;
  --button-icon-border-color: rgba(0, 0, 0, 0.2);
  --button-icon-background-color: rgba(0, 0, 0, 0.04);
  --button-icon-border-outer-color: rgba(0, 0, 0, 0.8);
  --button-icon-border-outer-alpha-color: rgba(0, 0, 0, 0.2);
  --button-icon-text-color-hover: #ffffff;
  --button-icon-border-color-hover: #000000;
  --button-icon-background-color-hover: #000000;
  --button-icon-border-outer-alpha-color-hover: rgba(0, 0, 0, 0.6);
  --button-icon-counter-text-color: #ffffff;
  --button-icon-counter-background-color: var(--accent);

  /* Button-icon-circle */
  --button-icon-circle-text-color: #000000;
  --button-icon-circle-text-color-hover: #000000;

  /* Button-circle (product card add-to-cart) */
  --button-icon-color-circle: #000000;
  --button-background-color-circle: #ffffff;
  --button-border-color-circle: #919191;
  --button-border-outer-color-circle: #d5d5d5;
  --button-icon-color-circle-hover: #000000;
  --button-background-color-circle-hover: #ffffff;
  --button-border-color-circle-hover: #919191;
  --button-border-outer-color-circle-hover: rgba(0, 0, 0, 0);

  /* Header navigation item (mobile menu) */
  --header-navigation-item-text-color: #000000;
  --header-navigation-item-border-color: rgba(0, 0, 0, 0.12);
  --header-navigation-item-text-background-color-hover: rgba(0, 0, 0, 0.06);
}