/* ============================================================
 * Design System — The Digital Atelier
 * Theme: mil et une fringue
 * ============================================================ */

/* ===== DESIGN TOKENS ===== */

:root {
  /* Brand palette */
  --color-primary: #a76749;
  --color-secondary: #926f61;
  --color-tertiary: #398583;

  /* Surface hierarchy (Level 0 → 2) */
  --color-surface: #FFFFFF;
  --color-surface-low: #8a817d;
  --color-surface-lowest: #9a908c;

  /* Outline tokens */
  --color-outline: rgba(127, 117, 113, 0.4);
  --color-outline-variant: rgba(127, 117, 113, 0.15);

  /* Text tokens */
  --color-on-surface: #f5f0ee;
  --color-on-surface-muted: rgba(245, 240, 238, 0.6);
  --color-on-card: #2f2a28;

  /* Typography */
  --font-display: "Noto Serif", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Layout */
  --radius-soft: 0.375rem;
  --spacing-base: 0.5rem;

  /* Shadows — soft ambient, never hard */
  --shadow-ambient: 0 20px 48px rgba(127, 117, 113, 0.06);
  --shadow-lift: 0 24px 56px rgba(127, 117, 113, 0.12);

  /* Bootstrap overrides */
  --bs-primary: #a76749;
  --bs-primary-rgb: 167, 103, 73;
  --bs-secondary: #926f61;
  --bs-secondary-rgb: 146, 111, 97;
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #926f61;
  --bs-font-sans-serif: "Manrope", system-ui, sans-serif;
  --bs-border-radius: 0.375rem;
  --bs-link-color: #a76749;
  --bs-link-hover-color: #926f61;
}

.product-flags .badge.discount, .product-flags .badge:not(.discount) {
  background: linear-gradient(100deg, var(--color-primary), #f0ddd5);
  border: none;
  color: #fff;
}

.btn-primary {
  background: linear-gradient(100deg, var(--color-primary), #f0ddd5);
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
}

body {
  font-family: var(--font-body);
}

.ps-imageslider__figcaption {
  bottom: unset;
  top: 20%;
  width: 45%;
  backdrop-filter: blur(5px);
  left: 10%;
}

.blockreassurance--dark {
  background-color: var(--color-on-surface);
}

.blockreassurance--dark .reassurance__title {
  color: var(--bs-primary);
}

a {
    color: rgba(var(--color-secondary), var(--bs-link-opacity, 1));
    text-decoration: none;
}