/* LP Templeuve · Bénévoles — design tokens (HTML/CSS sans framework)
   Thème clair par défaut. Mode sombre : data-theme="dark" sur html (ou tout conteneur).
   Pour suivre le système : recopier le bloc sombre dans @media (prefers-color-scheme: dark). */

:root, [data-theme="light"] {
  /* Palette club */
  --lp-green-50: #EDF6EF;
  --lp-green-100: #D6EBDC;
  --lp-green-300: #8FC29D;
  --lp-green-500: #1E7A38;
  --lp-green-700: #035C1C;
  --lp-green-800: #024A16;
  --lp-green-900: #01350F;

  /* Typographie */
  --lp-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --lp-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-text-xs: 12px;
  --lp-text-sm: 14px;
  --lp-text-md: 16px;
  --lp-text-lg: 18px;
  --lp-title-sm: 20px;
  --lp-title-md: 22px;
  --lp-score-sm: 22px;
  --lp-score-lg: 34px;

  /* Rayons */
  --lp-radius-sm: 6px;
  --lp-radius-md: 10px;
  --lp-radius-lg: 14px;
  --lp-radius-pill: 999px;

  /* Espacements */
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 20px;
  --lp-space-6: 24px;
  --lp-space-8: 32px;
  --lp-tap: 44px;

  /* Thème clair */
  color-scheme: light;
  --lp-bg: #F5F7F5;
  --lp-surface: #FFFFFF;
  --lp-surface-2: #EBF0EC;
  --lp-border: #DCE3DE;
  --lp-border-strong: #B4C1B8;
  --lp-ink: #142019;
  --lp-ink-2: #46524B;
  --lp-ink-3: #5C6760;

  --lp-brand: var(--lp-green-700);
  --lp-brand-hover: var(--lp-green-800);
  --lp-brand-contrast: #FFFFFF;
  --lp-brand-ink: var(--lp-green-700);
  --lp-brand-soft: var(--lp-green-50);
  --lp-band-bg: var(--lp-green-700);
  --lp-band-ink: #FFFFFF;
  --lp-band-ink-2: #CFE6D6;
  --lp-band-track: rgba(255, 255, 255, 0.22);
  --lp-band-fill: #FFFFFF;

  --lp-free-bg: #FFF6E3;
  --lp-free-border: #DDA23A;
  --lp-free-ink: #7A4A00;
  --lp-taken-bg: #F1F4F2;
  --lp-taken-ink: #3E4943;
  --lp-mine-bg: #E3F2E7;
  --lp-mine-border: var(--lp-green-700);
  --lp-mine-ink: var(--lp-green-900);
  --lp-danger: #B42318;
  --lp-danger-hover: #912018;
  --lp-danger-contrast: #FFFFFF;
  --lp-danger-bg: #FDECEA;
  --lp-danger-ink: #A51F15;
  --lp-past-bg: #F2F4F3;
  --lp-past-ink: #5C6760;
  --lp-past-band: #66716A;
  --lp-disabled-bg: #E2E8E4;
  --lp-disabled-ink: #6A746E;

  --lp-toast-bg: #142019;
  --lp-toast-ink: #FFFFFF;
  --lp-toast-icon: #7FD69A;
  --lp-focus: #D98E04;

  --lp-shadow-1: 0 1px 2px rgba(16, 32, 22, 0.06), 0 1px 1px rgba(16, 32, 22, 0.04);
  --lp-shadow-tab: 0 1px 3px rgba(16, 32, 22, 0.14);
  --lp-shadow-toast: 0 12px 32px rgba(16, 32, 22, 0.28);
}

[data-theme="dark"] {
  color-scheme: dark;
  --lp-bg: #0C120E;
  --lp-surface: #141C17;
  --lp-surface-2: #1B251F;
  --lp-border: #2A362F;
  --lp-border-strong: #3E4C44;
  --lp-ink: #E7EEE9;
  --lp-ink-2: #AAB7AF;
  --lp-ink-3: #8E9B93;

  --lp-brand: #4CBF6B;
  --lp-brand-hover: #63CD80;
  --lp-brand-contrast: #03200D;
  --lp-brand-ink: #74D690;
  --lp-brand-soft: #16301F;
  --lp-band-bg: #0F3D1F;
  --lp-band-ink: #F1F8F3;
  --lp-band-ink-2: #A9D3B5;
  --lp-band-track: rgba(255, 255, 255, 0.16);
  --lp-band-fill: #74D690;

  --lp-free-bg: #2A2110;
  --lp-free-border: #9A7429;
  --lp-free-ink: #F2C46B;
  --lp-taken-bg: #1A221D;
  --lp-taken-ink: #C3CDC6;
  --lp-mine-bg: #0F2D19;
  --lp-mine-border: #5CC97C;
  --lp-mine-ink: #A8EBBB;
  --lp-danger: #F0766C;
  --lp-danger-hover: #F48D85;
  --lp-danger-contrast: #2A0603;
  --lp-danger-bg: #3A1612;
  --lp-danger-ink: #FF9F97;
  --lp-past-bg: #111814;
  --lp-past-ink: #8A978F;
  --lp-past-band: #2A332E;
  --lp-disabled-bg: #212B25;
  --lp-disabled-ink: #7F8B84;

  --lp-toast-bg: #E7EEE9;
  --lp-toast-ink: #0C120E;
  --lp-toast-icon: #035C1C;
  --lp-focus: #F2C46B;

  --lp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lp-shadow-tab: 0 1px 3px rgba(0, 0, 0, 0.5);
  --lp-shadow-toast: 0 12px 32px rgba(0, 0, 0, 0.55);
}