/* =============================================================================
   DESIGN TOKENS - NIVEAU 3: STYLE RAFFINÉ
   Caractéristiques: Sophistiqué, harmonieux, épuré, minimaliste chic
   Font: Geometric Humanist (Avenir, Montserrat)
   ============================================================================= */

[data-style="raffine"],
.style-raffine {
  /* --- PALETTE DE COULEURS: Douce et équilibrée --- */
  --color-primary-bg: var(--color-indigo-50);
  --color-primary-bg-hover: var(--color-indigo-100);
  --color-primary-border: var(--color-indigo-500);
  --color-primary-text: var(--color-indigo-700);

  --color-accent-primary: var(--color-emerald-500);
  --color-accent-secondary: var(--color-slate-700);

  --color-bg-primary: var(--color-neutral-0);
  --color-bg-secondary: var(--color-indigo-50);
  --color-bg-tertiary: var(--color-indigo-100);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-indigo-700);
  --color-text-tertiary: var(--color-indigo-600);

  --color-border-light: var(--color-indigo-200);
  --color-border-medium: var(--color-indigo-300);

  /* --- TYPOGRAPHIE: Moderne et légère --- */
  --font-body: var(--font-geometric-humanist);
  --font-heading: var(--font-geometric-humanist);
  --font-accent: var(--font-geometric-humanist);

  --font-weight-body: var(--font-weight-light);
  --font-weight-heading: var(--font-weight-semibold);
  --font-weight-heading-display: var(--font-weight-bold);

  --line-height-body: 1.7;
  --line-height-heading: 1.2;

  /* --- ESPACEMENT: Aéré et proportionné --- */
  --spacing-inline-xs: var(--spacing-6);
  --spacing-inline-sm: var(--spacing-12);
  --spacing-inline-md: var(--spacing-16);
  --spacing-inline-lg: var(--spacing-24);
  --spacing-inline-xl: var(--spacing-32);

  --spacing-block-xs: var(--spacing-12);
  --spacing-block-sm: var(--spacing-16);
  --spacing-block-md: var(--spacing-24);
  --spacing-block-lg: var(--spacing-32);
  --spacing-block-xl: var(--spacing-48);

  /* --- BORDER RADIUS: Légèrement arrondi --- */
  --border-radius-button: var(--border-radius-lg);
  --border-radius-input: var(--border-radius-md);
  --border-radius-card: var(--border-radius-lg);
  --border-radius-modal: var(--border-radius-xl);

  /* --- OMBRES: Délicates --- */
  --shadow-button: var(--shadow-sm);
  --shadow-card: var(--shadow-sm);
  --shadow-modal: var(--shadow-md);
  --shadow-hover: var(--shadow-lg);

  /* --- TRANSITIONS: Douces --- */
  --transition-ui: 200ms;
  --transition-motion: 300ms;
}
