/**
 * CSS Design System & HSL Design Tokens
 * Rotissoire & Co. | French Rotisserie & Volailles de Ferme
 * Inspiration: French Bistro de Luxe / Cuivre & Chêne
 */

:root {
  /* HSL Color Palette - Light Mode (Bistro Elegance) */
  --blue-h: 215;
  --blue-s: 60%;
  --blue-l: 25%;

  --gold-h: 38;
  --gold-s: 92%;
  --gold-l: 48%;

  --copper-h: 22;
  --copper-s: 85%;
  --copper-l: 52%;

  --cream-h: 42;
  --cream-s: 30%;
  --cream-l: 97%;

  --green-h: 145;
  --green-s: 30%;
  --green-l: 35%;

  /* Semantic Variables */
  --color-primary: hsl(var(--copper-h), var(--copper-s), var(--copper-l)); /* Cobre Flambé */
  --color-primary-hover: hsl(var(--copper-h), var(--copper-s), 44%);
  --color-primary-light: hsla(var(--copper-h), var(--copper-s), var(--copper-l), 0.12);

  --color-secondary: hsl(var(--gold-h), var(--gold-s), var(--gold-l)); /* Doré Rôti */
  --color-secondary-hover: hsl(var(--gold-h), var(--gold-s), 40%);

  --color-accent: hsl(var(--green-h), var(--green-s), var(--green-l)); /* Vert Romarin */
  --color-accent-light: hsla(var(--green-h), var(--green-s), var(--green-l), 0.12);

  --color-bg: hsl(var(--cream-h), var(--cream-s), var(--cream-l));
  --color-surface: #FFFFFF;
  --color-surface-hover: hsl(42, 25%, 94%);
  --color-surface-alt: hsl(42, 22%, 92%);

  --color-text: hsl(var(--blue-h), 45%, 16%);
  --color-text-muted: hsl(var(--blue-h), 20%, 42%);
  --color-border: hsl(42, 20%, 86%);

  --color-dark-bg: hsl(218, 35%, 11%);
  --color-dark-surface: hsl(218, 30%, 15%);
  --color-dark-text: hsl(42, 25%, 94%);

  /* Typography */
  --font-display: 'Syne', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);
  --font-size-hero: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4.5rem;
  --spacing-3xl: 6.5rem;

  /* Layout */
  --container-max: 1240px;
  --header-height: 76px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(24, 42, 69, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 42, 69, 0.08);
  --shadow-lg: 0 16px 40px rgba(24, 42, 69, 0.12);
  --shadow-gold: 0 8px 30px hsla(var(--gold-h), var(--gold-s), var(--gold-l), 0.28);
  --shadow-copper: 0 8px 30px hsla(var(--copper-h), var(--copper-s), var(--copper-l), 0.32);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode - Mode Nuit Rôtisserie */
[data-theme="dark"] {
  --color-bg: var(--color-dark-bg);
  --color-surface: var(--color-dark-surface);
  --color-surface-hover: hsl(218, 28%, 20%);
  --color-surface-alt: hsl(218, 28%, 13%);
  --color-text: var(--color-dark-text);
  --color-text-muted: hsl(215, 18%, 70%);
  --color-border: hsl(218, 22%, 24%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
}