/* Emoving : variables du design system, mêmes noms que dans Figma
   (« Emoving · Design System + Maquettes », fichier 1GAb6jKTjyNjBeF3u5mjTV).
   color/text/primary ⇄ --color-text-primary. Pour changer de DA : modifier les
   primitives --palette-* et les polices --font-*. */

:root {
  /* Primitives : valeurs brutes, jamais utilisées directement dans les composants. */
  --palette-white: #ffffff;
  --palette-violet-50: #f4f0ff;
  --palette-violet-100: #e1d6ff;
  --palette-violet-200: #c9b8ff;
  --palette-violet-300: #a98bff;
  --palette-violet-400: #875cff;
  --palette-violet-600: #4700df;
  --palette-violet-700: #3a00b5;
  --palette-night-700: #2c1f66;
  --palette-night-800: #1c1050;
  --palette-night-900: #10003d;
  --palette-neutral-50: #f7f6fa;
  --palette-neutral-100: #f2f1f5;
  --palette-neutral-200: #e4e1ec;
  --palette-neutral-300: #cfcad9;
  --palette-neutral-400: #8e879e;
  --palette-neutral-500: #6b6580;
  --palette-neutral-600: #5e5873;
  --palette-green-50: #e6f6ec;
  --palette-green-400: #5ce08f;
  --palette-green-500: #00a34f;
  --palette-green-700: #006633;
  --palette-red-50: #fdecec;
  --palette-red-300: #ff9a9a;
  --palette-red-600: #c62828;
  --palette-amber-50: #fff4e0;
  --palette-amber-300: #ffc46b;
  --palette-amber-700: #9a5b00;
  --palette-lilac-100: #ede7ff;
  --palette-apricot-100: #ffe6d5;
  --palette-apricot-300: #ffb88a;
  --palette-brand-logo-violet: #4700df;
  --palette-brand-logo-ink: #10003d;

  /* Polices */
  --font-display: "Figtree", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Espacements (Figma : Spacing) */
  --space-0: 0;
  --space-50: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;
  --space-1000: 80px;
  --space-1200: 96px;
  --space-1600: 128px;

  /* Arrondis (Figma : Radius) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Mise en page (Figma : Layout, mode Desktop ; Tablet et Mobile plus bas) */
  --layout-gutter: 80px;
  --layout-section-y: 96px;
  --layout-grid-gap: 24px;
  --layout-header-h: 72px;
  --layout-content-max: 1280px;

  /* Mouvement (Figma : Motion) */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Ombres (Figma : effect styles) */
  --shadow-card: 0 1px 2px rgb(16 0 61 / 0.06), 0 4px 16px rgb(16 0 61 / 0.06);
  --shadow-card-hover: 0 2px 4px rgb(16 0 61 / 0.06), 0 12px 32px rgb(16 0 61 / 0.14);
  --shadow-dropdown: 0 16px 48px rgb(16 0 61 / 0.18);
  --shadow-sticky: 0 -4px 24px rgb(16 0 61 / 0.1);

  /* Verre givré (Figma : effect style Blur/Glass) */
  --blur-glass: blur(18px) saturate(160%);
}

/* Couleurs par rôle, mode Light (par défaut) */
:root,
.tone-light {
  --color-bg-page: var(--palette-white);
  --color-bg-subtle: var(--palette-lilac-100);
  --color-bg-surface: var(--palette-white);
  --color-bg-product: var(--palette-neutral-100);
  --color-bg-store: var(--palette-night-900);
  --color-bg-warm: var(--palette-apricot-100);
  --color-bg-overlay: var(--palette-night-900);
  --color-text-primary: var(--palette-night-900);
  --color-text-secondary: var(--palette-neutral-600);
  --color-text-placeholder: var(--palette-neutral-500);
  --color-text-link: var(--palette-violet-600);
  --color-text-on-action: var(--palette-white);
  --color-text-on-image: var(--palette-white);
  --color-action-primary: var(--palette-violet-600);
  --color-action-primary-hover: var(--palette-violet-700);
  --color-action-outline: var(--palette-violet-600);
  --color-action-selected-bg: var(--palette-lilac-100);
  --color-border-default: var(--palette-neutral-200);
  --color-border-input: var(--palette-neutral-400);
  --color-border-focus: var(--palette-violet-600);
  --color-feedback-success: var(--palette-green-700);
  --color-feedback-success-bg: var(--palette-green-50);
  --color-feedback-error: var(--palette-red-600);
  --color-feedback-error-bg: var(--palette-red-50);
  --color-feedback-warning: var(--palette-amber-700);
  --color-feedback-warning-bg: var(--palette-amber-50);
  --color-icon-store: var(--palette-violet-600);
  --color-accent: var(--palette-apricot-300);
  --color-bg-glass: rgb(255 255 255 / 0.74);
  --color-border-glass: rgb(255 255 255 / 0.55);
  --color-text-on-glass: var(--palette-night-900);
  --color-badge-brand-bg: var(--palette-apricot-300);
  --color-badge-brand-text: var(--palette-night-900);
  --color-logo-text: var(--palette-brand-logo-ink);
  --color-logo-accent: var(--palette-brand-logo-violet);
}

/* Mode Dark : fonds bleu nuit (pied de page). Boutons blancs, texte violet, accent abricot. */
.tone-dark {
  --color-bg-page: var(--palette-night-900);
  --color-bg-subtle: var(--palette-night-800);
  --color-bg-surface: var(--palette-night-800);
  --color-text-primary: var(--palette-white);
  --color-text-secondary: var(--palette-violet-100);
  --color-text-placeholder: var(--palette-violet-200);
  --color-text-link: var(--palette-apricot-300);
  --color-text-on-action: var(--palette-violet-600);
  --color-action-primary: var(--palette-white);
  --color-action-primary-hover: var(--palette-lilac-100);
  --color-action-outline: var(--palette-white);
  --color-action-selected-bg: var(--palette-night-700);
  --color-border-default: var(--palette-night-700);
  --color-border-input: var(--palette-violet-300);
  --color-border-focus: var(--palette-apricot-300);
  --color-feedback-success: var(--palette-green-400);
  --color-feedback-success-bg: var(--palette-night-800);
  --color-feedback-error: var(--palette-red-300);
  --color-feedback-error-bg: var(--palette-night-800);
  --color-feedback-warning: var(--palette-amber-300);
  --color-feedback-warning-bg: var(--palette-night-800);
  --color-icon-store: var(--palette-apricot-300);
  --color-logo-text: var(--palette-white);
  --color-logo-accent: var(--palette-violet-300);
}

/* Mode Accent : fonds violets. */
.tone-accent {
  --color-bg-page: var(--palette-violet-600);
  --color-bg-subtle: var(--palette-violet-700);
  --color-bg-surface: var(--palette-white);
  --color-text-primary: var(--palette-white);
  --color-text-secondary: var(--palette-violet-100);
  --color-text-placeholder: var(--palette-violet-200);
  --color-text-link: var(--palette-white);
  --color-text-on-action: var(--palette-violet-600);
  --color-action-primary: var(--palette-white);
  --color-action-primary-hover: var(--palette-lilac-100);
  --color-action-outline: var(--palette-white);
  --color-action-selected-bg: var(--palette-violet-700);
  --color-border-default: var(--palette-violet-400);
  --color-border-input: var(--palette-violet-200);
  --color-border-focus: var(--palette-white);
  --color-feedback-success: var(--palette-white);
  --color-feedback-success-bg: var(--palette-violet-700);
  --color-feedback-error: var(--palette-white);
  --color-feedback-error-bg: var(--palette-violet-700);
  --color-feedback-warning: var(--palette-white);
  --color-feedback-warning-bg: var(--palette-violet-700);
  --color-icon-store: var(--palette-white);
  --color-logo-text: var(--palette-white);
  --color-logo-accent: var(--palette-apricot-300);
}

/* Layout : mode Tablet */
@media (max-width: 1023px) {
  :root {
    --layout-gutter: 40px;
    --layout-section-y: 72px;
    --layout-grid-gap: 20px;
    --layout-header-h: 64px;
    --layout-content-max: 944px;
  }
}

/* Layout : mode Mobile */
@media (max-width: 767px) {
  :root {
    --layout-gutter: 20px;
    --layout-section-y: 56px;
    --layout-grid-gap: 16px;
    --layout-header-h: 60px;
    --layout-content-max: 350px;
  }
}

/* Styles de texte (Figma : text styles). Les styles « Mobile/… » prennent le relais sous 768 px. */
.t-display-xl { font: 800 64px/1.06 var(--font-display); letter-spacing: -0.025em; }
.t-display-l { font: 800 48px/1.1 var(--font-display); letter-spacing: -0.02em; }
.t-h1 { font: 800 40px/1.12 var(--font-display); letter-spacing: -0.015em; }
.t-h2 { font: 800 32px/1.18 var(--font-display); letter-spacing: -0.01em; }
.t-h3 { font: 700 24px/1.25 var(--font-display); letter-spacing: -0.005em; }
.t-h4 { font: 700 20px/1.3 var(--font-display); }
.t-body-l { font: 400 18px/1.55 var(--font-body); }
.t-body-m { font: 400 16px/1.55 var(--font-body); }
.t-body-s { font: 400 14px/1.5 var(--font-body); }
.t-label-l { font: 600 16px/1.3 var(--font-body); }
.t-label-m { font: 600 14px/1.3 var(--font-body); }
.t-overline { font: 700 12px/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.t-nav { font: 500 15px/1.3 var(--font-body); }
.t-caption { font: 500 12px/1.4 var(--font-body); }
.t-price-l { font: 800 32px/1.1 var(--font-display); letter-spacing: -0.01em; }
.t-price-m { font: 700 20px/1.2 var(--font-display); }

@media (max-width: 767px) {
  .t-display-xl { font-size: 40px; line-height: 1.12; letter-spacing: -0.01em; }
  .t-display-l { font-size: 34px; line-height: 1.15; letter-spacing: -0.005em; }
  .t-h1 { font-size: 30px; line-height: 1.18; }
  .t-h2 { font-size: 26px; line-height: 1.22; letter-spacing: 0; }
  .t-h3 { font-size: 21px; line-height: 1.28; }
  .t-price-l { font-size: 26px; line-height: 1.15; letter-spacing: 0; }
}