:root{
  --brand-h: 45;    /* satu-satunya baris yang perlu diubah klien */
  --brand-s: 100%;

  /*
   * Kuning terang tidak bisa dipakai sekaligus sebagai latar DAN sebagai warna
   * teks di atas putih: yang satu butuh cerah, yang satu butuh gelap. Jadi warna
   * merek dipecah jadi empat peran. Semuanya diturunkan dari --brand-h di atas,
   * sehingga mengganti warna situs tetap cukup satu baris.
   */
  --brand-surface: hsl(var(--brand-h) var(--brand-s) 50%);        /* bar menu, tombol utama */
  --brand-surface-dark: hsl(var(--brand-h) var(--brand-s) 43%);   /* hover tombol */
  --brand-text: hsl(var(--brand-h) var(--brand-s) 27%);           /* teks & ikon merek di atas putih */
  --on-brand: hsl(var(--brand-h) 30% 10%);                        /* teks di atas permukaan merek */
}
