/* ============================================================================
   Paddel Daddies — Design Tokens (CSS Custom Properties)
   Brand: Hunter Green #3C5140  ·  Surface: Pure White #FFFFFF
   Struktur: (1) primitives/scale  (2) semantic aliases (light)  (3) dark theme
   Pakai token SEMANTIK di UI (--color-primary, --color-text), bukan angka mentah.
   ============================================================================ */

:root {
  /* ---------- 1. PRIMITIVES — Brand (green) ---------- */
  --green-50:  #F4F6F4;
  --green-100: #E4E7E4;
  --green-200: #C0CEC3;
  --green-300: #93AA97;
  --green-400: #5F8166;
  --green-500: #3C5140;  /* brand */
  --green-600: #344638;  /* hover */
  --green-700: #29382C;  /* brand-ink */
  --green-800: #1E2920;
  --green-900: #161D17;

  /* Channel RGB (untuk rgb(var(--x) / alpha) — dipakai utility opacity Tailwind) */
  --green-100-rgb: 228 231 228;
  --green-200-rgb: 192 206 195;
  --green-300-rgb: 147 170 151;
  --green-400-rgb: 95 129 102;
  --green-500-rgb: 60 81 64;
  --green-600-rgb: 52 70 56;
  --green-700-rgb: 41 56 44;

  /* ---------- Neutral (green-tinted gray, serasi hunter green) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8F7;
  --neutral-100: #EEF0EE;
  --neutral-200: #DDE1DD;
  --neutral-300: #C2C8C3;
  --neutral-400: #9AA29B;
  --neutral-500: #737B74;
  --neutral-600: #575E58;
  --neutral-700: #434944;
  --neutral-800: #2C302D;
  --neutral-900: #1B1E1C;

  /* ---------- Semantic scales (muted, senada hijau) ---------- */
  /* success — hijau lebih terang & bersih (dibedakan dari brand) */
  --success-50:  #EDF7EF; --success-100: #D3EBD8; --success-200: #A9D8B4;
  --success-300: #77BF89; --success-400: #4CA366; --success-500: #2E8B4E;
  --success-600: #24713F; --success-700: #1E5A33; --success-800: #184529; --success-900: #123420;

  /* warning — amber/ochre muted */
  --warning-50:  #FBF4E7; --warning-100: #F3E2BF; --warning-200: #E8C989;
  --warning-300: #DBAC52; --warning-400: #CE922E; --warning-500: #B77A1E;
  --warning-600: #966119; --warning-700: #744B14; --warning-800: #55370F; --warning-900: #3C270B;

  /* danger — brick/terracotta muted */
  --danger-50:  #FBEEEB; --danger-100: #F5D3CB; --danger-200: #EAA99B;
  --danger-300: #DC7C68; --danger-400: #CB5540; --danger-500: #B23B29;
  --danger-600: #8F2F21; --danger-700: #6E251A; --danger-800: #4F1B13; --danger-900: #38130D;

  /* info — teal/blue-green muted */
  --info-50:  #EAF3F5; --info-100: #C9E1E6; --info-200: #99C5CE;
  --info-300: #63A3B0; --info-400: #3D818F; --info-500: #2C6774;
  --info-600: #23525D; --info-700: #1C4048; --info-800: #152F35; --info-900: #0E2024;

  /* ---------- 2. SEMANTIC ALIASES — LIGHT (default) ---------- */
  /* Surface & background */
  --color-surface:         var(--neutral-0);    /* bg utama — putih murni */
  --color-surface-subtle:  var(--green-50);      /* section/card lembut */
  --color-surface-muted:   var(--neutral-50);
  --color-surface-inverse: var(--green-800);

  /* Text */
  --color-text:            var(--green-700);      /* teks utama di atas putih */
  --color-text-secondary:  var(--neutral-600);
  --color-text-muted:      var(--neutral-500);
  --color-text-on-primary: var(--neutral-0);      /* teks di atas hijau */
  --color-text-inverse:    var(--neutral-0);

  /* Border & divider */
  --color-border:          var(--green-100);      /* halus, kartu tetap terpisah di putih */
  --color-border-strong:   var(--neutral-300);
  --color-divider:         var(--neutral-200);

  /* Brand / interactive */
  --color-primary:         var(--green-500);
  --color-primary-hover:   var(--green-600);
  --color-primary-active:  var(--green-700);
  --color-primary-subtle:  var(--green-50);       /* bg tint utk chip/badge */
  --color-focus-ring:      rgba(60, 81, 64, 0.45);

  /* Feedback (bg lembut + teks kontras + solid) */
  --color-success:      var(--success-500); --color-success-bg: var(--success-50); --color-success-fg: var(--success-700);
  --color-warning:      var(--warning-500); --color-warning-bg: var(--warning-50); --color-warning-fg: var(--warning-700);
  --color-danger:       var(--danger-500);  --color-danger-bg:  var(--danger-50);  --color-danger-fg:  var(--danger-700);
  --color-info:         var(--info-500);    --color-info-bg:    var(--info-50);    --color-info-fg:    var(--info-700);

  /* Elevation (shadow) */
  --shadow-sm: 0 1px 2px rgba(22, 29, 23, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 29, 23, 0.08);
  --shadow-lg: 0 12px 28px rgba(22, 29, 23, 0.12);

  /* Radius & spacing (opsional, biar sistem lengkap) */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px;
}

/* ---------- 3. DARK THEME ---------- */
:root[data-theme="dark"],
.dark {
  --color-surface:         var(--green-900);
  --color-surface-subtle:  var(--green-800);
  --color-surface-muted:   var(--neutral-800);
  --color-surface-inverse: var(--neutral-0);

  --color-text:            var(--neutral-50);
  --color-text-secondary:  var(--neutral-300);
  --color-text-muted:      var(--neutral-400);
  --color-text-on-primary: var(--green-900);
  --color-text-inverse:    var(--green-900);

  --color-border:          var(--neutral-800);
  --color-border-strong:   var(--neutral-700);
  --color-divider:         var(--neutral-800);

  --color-primary:         var(--green-400);       /* naikkan lightness di dark */
  --color-primary-hover:   var(--green-300);
  --color-primary-active:  var(--green-200);
  --color-primary-subtle:  var(--green-800);
  --color-focus-ring:      rgba(147, 170, 151, 0.5);

  --color-success-bg: var(--success-900); --color-success-fg: var(--success-200);
  --color-warning-bg: var(--warning-900); --color-warning-fg: var(--warning-200);
  --color-danger-bg:  var(--danger-900);  --color-danger-fg:  var(--danger-200);
  --color-info-bg:    var(--info-900);    --color-info-fg:    var(--info-200);
}