/* ============================================================
   Genesa — "product" color theme (METRIKA)
   Layer on top of variable.css. Activate with <html class="theme-product">.
   Swaps only primary (green from the METRIKA logo), secondary (logo gold)
   and neutral (green-tinted gray). Every other token, font, radius and
   component rule stays Genesa.
   Logo colors: green #08765A → #005B44 → #003F30 · mint #36C99A · gold #FFD64B / #E7A51D
   Contrast (AA ≥ 4.5): white on 500 = 5.6 · white on 700 (hover) = 8.1 · 500 text on white = 5.6
   ============================================================ */

:root.theme-product {
  /* Primary — Hijau Metrika (500 = logo top green #08765A, 700 = logo mid #005B44) */
  --base-primary-50:  #ECF7F3;
  --base-primary-100:  #CFEDE2;
  --base-primary-200:  #A2DCC8;
  --base-primary-300:  #6CC5A8;
  --base-primary-400:  #2FA582;
  --base-primary-500:  #08765A;
  --base-primary-600:  #066A51;
  --base-primary-700:  #005B44;
  --base-primary-800:  #004A38;
  --base-primary-900:  #003F30;
  --base-primary-50-fg:  var(--black-fg);
  --base-primary-100-fg:  var(--black-fg);
  --base-primary-200-fg:  var(--black-fg);
  --base-primary-300-fg:  var(--black-fg);
  --base-primary-400-fg:  var(--black-fg);
  --base-primary-500-fg:  var(--white-fg);
  --base-primary-600-fg:  var(--white-fg);
  --base-primary-700-fg:  var(--white-fg);
  --base-primary-800-fg:  var(--white-fg);
  --base-primary-900-fg:  var(--white-fg);

  /* Secondary — Emas Metrika (400 = logo gold #FFD64B, 600 = logo deep gold #E7A51D) */
  --base-secondary-50:  #FFFBEA;
  --base-secondary-100:  #FFF3C4;
  --base-secondary-200:  #FFE98F;
  --base-secondary-300:  #FFDF66;
  --base-secondary-400:  #FFD64B;
  --base-secondary-500:  #F5BE2E;
  --base-secondary-600:  #E7A51D;
  --base-secondary-700:  #B97F0E;
  --base-secondary-800:  #8A5E08;
  --base-secondary-900:  #5E3F04;
  --base-secondary-50-fg:  var(--black-fg);
  --base-secondary-100-fg:  var(--black-fg);
  --base-secondary-200-fg:  var(--black-fg);
  --base-secondary-300-fg:  var(--black-fg);
  --base-secondary-400-fg:  var(--black-fg);
  --base-secondary-500-fg:  var(--black-fg);
  --base-secondary-600-fg:  var(--black-fg);
  --base-secondary-700-fg:  var(--black-fg);
  --base-secondary-800-fg:  var(--white-fg);
  --base-secondary-900-fg:  var(--white-fg);

  /* Neutral — green-tinted gray */
  --base-neutral-50:  #FFFFFF;
  --base-neutral-100:  #F5F7F6;
  --base-neutral-200:  #DFE4E2;
  --base-neutral-300:  #C1C9C6;
  --base-neutral-400:  #949E9A;
  --base-neutral-500:  #5F6A66;
  --base-neutral-600:  #47514D;
  --base-neutral-700:  #2E3633;
  --base-neutral-800:  #1C2321;
  --base-neutral-900:  #121715;
  --base-neutral-50-fg:  var(--black-fg);
  --base-neutral-100-fg:  var(--black-fg);
  --base-neutral-200-fg:  var(--black-fg);
  --base-neutral-300-fg:  var(--black-fg);
  --base-neutral-400-fg:  var(--black-fg);
  --base-neutral-500-fg:  var(--white-fg);
  --base-neutral-600-fg:  var(--white-fg);
  --base-neutral-700-fg:  var(--white-fg);
  --base-neutral-800-fg:  var(--white-fg);
  --base-neutral-900-fg:  var(--white-fg);

  --shadow-color: 18 23 21;
}

:root.dark.theme-product {
  /* variable.css hardcodes a lifted Genesa green for dark --primary-base; re-point it to the Metrika ramp */
  --primary-base:    var(--base-primary-500);
  --primary-base-fg: var(--base-primary-500-fg);

  /* Primary (dark) — lifted mint, base #3CC79A */
  --base-primary-50:  #062A20;
  --base-primary-100:  #0A3D2F;
  --base-primary-200:  #0F5341;
  --base-primary-300:  #156B54;
  --base-primary-400:  #23946F;
  --base-primary-500:  #3CC79A;
  --base-primary-600:  #6FD8B4;
  --base-primary-700:  #A0E6CD;
  --base-primary-800:  #CDF2E4;
  --base-primary-900:  #ECF9F4;
  --base-primary-50-fg:  var(--white-fg);
  --base-primary-100-fg:  var(--white-fg);
  --base-primary-200-fg:  var(--white-fg);
  --base-primary-300-fg:  var(--white-fg);
  --base-primary-400-fg:  var(--white-fg);
  --base-primary-500-fg:  var(--black-fg);
  --base-primary-600-fg:  var(--black-fg);
  --base-primary-700-fg:  var(--black-fg);
  --base-primary-800-fg:  var(--black-fg);
  --base-primary-900-fg:  var(--black-fg);

  /* Secondary (dark) */
  --base-secondary-50:  #5E3F04;
  --base-secondary-100:  #8A5E08;
  --base-secondary-200:  #B97F0E;
  --base-secondary-300:  #E7A51D;
  --base-secondary-400:  #F5BE2E;
  --base-secondary-500:  #FFD64B;
  --base-secondary-600:  #FFDF66;
  --base-secondary-700:  #FFE98F;
  --base-secondary-800:  #FFF3C4;
  --base-secondary-900:  #FFFBEA;
  --base-secondary-50-fg:  var(--white-fg);
  --base-secondary-100-fg:  var(--white-fg);
  --base-secondary-200-fg:  var(--black-fg);
  --base-secondary-300-fg:  var(--black-fg);
  --base-secondary-400-fg:  var(--black-fg);
  --base-secondary-500-fg:  var(--black-fg);
  --base-secondary-600-fg:  var(--black-fg);
  --base-secondary-700-fg:  var(--black-fg);
  --base-secondary-800-fg:  var(--black-fg);
  --base-secondary-900-fg:  var(--black-fg);

  /* Neutral (dark) */
  --base-neutral-50:  #0F1412;
  --base-neutral-100:  #161C19;
  --base-neutral-200:  #262E2B;
  --base-neutral-300:  #3A4440;
  --base-neutral-400:  #5E6964;
  --base-neutral-500:  #8A948F;
  --base-neutral-600:  #B2BAB6;
  --base-neutral-700:  #D3D9D6;
  --base-neutral-800:  #ECEFEE;
  --base-neutral-900:  #FFFFFF;
  --base-neutral-50-fg:  var(--white-fg);
  --base-neutral-100-fg:  var(--white-fg);
  --base-neutral-200-fg:  var(--white-fg);
  --base-neutral-300-fg:  var(--white-fg);
  --base-neutral-400-fg:  var(--white-fg);
  --base-neutral-500-fg:  var(--black-fg);
  --base-neutral-600-fg:  var(--black-fg);
  --base-neutral-700-fg:  var(--black-fg);
  --base-neutral-800-fg:  var(--black-fg);
  --base-neutral-900-fg:  var(--black-fg);
}