/* Jetons de design BlogFlow. Le corail n'est utilisé que par les jetons --btn-primary-*. */
:root {
  /* Marque */
  --color-navy: #12214A;
  --color-teal: #0E8F8F;
  --color-coral: #FF7A59;
  --color-bg: #FAF8F5;

  /* Surfaces et gris chauds */
  --color-surface: #FFFFFF;
  --color-grey-100: #F1EEE9;
  --color-grey-200: #E5E1DA;
  --color-grey-400: #A8A199;
  --color-grey-600: #6B645D;
  --color-grey-800: #3A3631;
  --color-border: #E5E1DA;

  /* Texte (paires validées WCAG AA par tests/test_tokens.py) */
  --color-text: #12214A;
  --color-text-muted: #5C5650;
  --color-heading: #12214A;
  --color-heading-accent: #0E8F8F; /* grands titres uniquement (>= 3:1) */
  --color-teal-text: #0B7A7A;      /* liens et texte turquoise (>= 4.5:1) */

  /* États */
  --color-success: #2E9E5B;
  --color-warning: #E0A21B;
  --color-danger: #D64545;
  --color-info: #3B82D6;
  --color-success-text: #1B7A3E;
  --color-warning-text: #8A5A00;
  --color-danger-text: #B3261E;
  --color-info-text: #1F5FA8;

  /* Bouton primaire (seul usage du corail) */
  --btn-primary-bg: var(--color-coral);
  --btn-primary-fg: #12214A;
  --btn-primary-hover: #F2613D;

  /* Espacement */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Rayons */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(18, 33, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(18, 33, 74, 0.10);
  --shadow-lg: 0 12px 32px rgba(18, 33, 74, 0.14);

  /* Typographie */
  --font-heading: "Plus Jakarta Sans Variable", system-ui, sans-serif;
  --font-body: "Inter Variable", system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #0E1630;
  --color-surface: #172146;
  --color-grey-100: #1D2850;
  --color-grey-200: #2A3560;
  --color-grey-400: #7C7A82;
  --color-grey-600: #B9B2A9;
  --color-grey-800: #E5E1DA;
  --color-border: #2A3560;

  --color-text: #F4F0EA;
  --color-text-muted: #B9B2A9;
  --color-heading: #F4F0EA;
  --color-heading-accent: #4FC9C9;
  --color-teal-text: #4FC9C9;

  --color-success-text: #57C98A;
  --color-warning-text: #F2B84B;
  --color-danger-text: #FF8A80;
  --color-info-text: #7DB3F2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}