:root {
  /* Colors */
  --color-primary: #333;
  --color-secondary: #777;
  --color-tertiary: #666;
  --color-background: #f8f8f8;
  --color-sidebar: #fcf6e8;
  --color-white: #ffffff;
  --color-border: #ddd;
  --color-hover: #555;
  --color-submenu: #999;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-dark: #222;
  --color-text: #444;

  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-small: 0.875rem; /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-medium: 1.125rem;   /* 18px */
  --font-size-large: 1.25rem;   /* 20px */
  --font-size-h3: 1.5rem;        /* 24px */
  --font-size-h2: 2rem;        /* 32px */
  --font-size-h1: 2.5rem;        /* 40px */
  --line-height-base: 1.5;
  --line-height-tight: 1.2;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --max-width-form: 37.5rem;   /* 600px */
  --container-padding: 5%;    /* contrôle les marges latérales */
  --border-radius: 0.1875rem;  /* 3px */
  --shadow-default: 0 0.125rem 0.625rem var(--color-shadow);

  /* Spacing */
  --spacing-xxs: 0.25rem;      /* 4px */
  --spacing-xs: 0.5rem;        /* 8px */
  --spacing-sm: 0.9375rem;     /* 15px */
  --spacing-md: 1.25rem;       /* 20px */
  --spacing-lg: 1.875rem;      /* 30px */
  --spacing-xl: 3.125rem;      /* 50px */
  --spacing-xxl: 6.25rem;      /* 100px */

  /* Sidebar */
  --sidebar-width-small: 12.5rem; /* 200px */
  --sidebar-width-large: 15.625rem; /* 250px */
  --sidebar-padding: 1.875rem 1rem;
  --sidebar-logo-margin: 2rem;
  --sidebar-item-margin: 0;
  --sidebar-submenu-padding: 0.75rem;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-reduced: 0.1s ease;

  /* Sections */
  --section-margin: var(--spacing-md) 0;
  --section-margin-large: var(--spacing-xxl) 0;
  --section-padding: var(--spacing-md) var(--container-padding);
  --section-spacing-inner: var(--spacing-lg);

  /* Z-Index Layers */
  --layer-sidebar: 1000;
  --layer-menu-toggle: 1001;
  
  /* Accessibilité */
  --focus-color: #007bff;
  --focus-ring: 0 0 0 3px rgba(0, 123, 255, 0.5);
  --color-focus: var(--focus-color);
  --color-error: #dc3545;
  --min-touch-target: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: var(--transition-reduced);
  }
}