/* CSS THONON SOUVENIRS - 2026 */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap");

:root {
  /* Fonts */
  --font-family-base: "DM Sans", system-ui, sans-serif;
  --font-family-display: "Playfair Display", Georgia, serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.85rem;
  --font-size-xs: 0.75rem;
  --font-weight-light: 300;
  --font-weight-medium: 400;
  --font-weight-semibold: 500;

  /* Colors — noir/gris froid épuré + accent bleu électrique */
  --color-text-primary: #f2f4f7;
  --color-text-secondary: #d8dde6;
  --color-text-tertiary: #9ba4b2;
  --color-text-quaternary: #626b78;
  --color-bg-primary: #08090b;
  --color-bg-secondary: #0e1014;
  --color-bg-tertiary: #151820;
  --color-border: #1e2330;
  --color-accent: #2979ff;
  --color-accent-hover: #5395ff;
  --color-accent-green: #4caf7d;
  --color-header: #f0f2f5;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5);
  --spacing-sm: calc(var(--spacing-unit) * 1);
  --spacing-md: calc(var(--spacing-unit) * 2);
  --spacing-lg: calc(var(--spacing-unit) * 3);
  --spacing-xl: calc(var(--spacing-unit) * 4);
  --spacing-xxl: calc(var(--spacing-unit) * 5);

  /* Borders and Shadows */
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --border: 1px solid var(--color-border);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
}