:root {
  /* iOS System Colors */
  --ios-blue: #007AFF;
  --ios-blue-tint: rgba(0, 122, 255, 0.12);
  --ios-green: #34C759;
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;
  --ios-yellow: #FFCC00;
  --ios-purple: #AF52DE;
  --ios-indigo: #5856D6;
  --ios-teal: #30B0C7;
  --ios-pink: #FF2D55;

  /* Couleurs des blocs (BLOCS du template) */
  --c-gray: #8E8E93;
  --c-blue: #007AFF;
  --c-indigo: #5856D6;
  --c-purple: #AF52DE;
  --c-pink: #FF2D55;
  --c-red: #FF3B30;
  --c-orange: #FF9500;
  --c-yellow: #D4A300;
  --c-green: #34C759;
  --c-teal: #30B0C7;

  /* États d'un item */
  --st-done: #34C759;
  --st-skipped: #FF9500;
  --st-todo: #C7C7CC;

  /* Grays */
  --gray-1: #8E8E93;
  --gray-2: #AEAEB2;
  --gray-3: #C7C7CC;
  --gray-4: #D1D1D6;
  --gray-5: #E5E5EA;
  --gray-6: #F2F2F7;

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-grouped: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-blur: rgba(242, 242, 247, 0.88);

  /* Text */
  --text-primary: #000000;
  --text-secondary: rgba(60, 60, 67, 0.6);
  --text-tertiary: rgba(60, 60, 67, 0.3);
  --text-link: #007AFF;
  --text-on-color: #FFFFFF;

  /* Separator */
  --separator: rgba(60, 60, 67, 0.12);
  --separator-opaque: #C6C6C8;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;

  /* Nav & chrome */
  --nav-height: 44px;
  --tab-bar-height: 49px;
  --sidebar-width: 272px;
  --page-max: 1180px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --ease-ios: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 180ms;
  --duration-normal: 260ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #000000;
    --bg-grouped: #1C1C1E;
    --bg-elevated: #1C1C1E;
    --bg-card: #2C2C2E;
    --bg-blur: rgba(28, 28, 30, 0.88);
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.65);
    --separator-opaque: #38383A;
    --gray-5: #2C2C2E;
    --gray-6: #1C1C1E;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --st-todo: #48484A;
    --c-yellow: #FFD60A;
  }
}