/* ==========================================================
   HINTC — Design tokens (palet Google)
   Biru #4285F4 · Merah #EA4335 · Kuning #FBBC05 · Hijau #34A853
   Putih dominan, abu-abu Google untuk teks; empat warna sebagai aksen.
   Varian gelap (-700) dipakai untuk tombol/teks agar kontras terbaca.
   ========================================================== */
:root {
  /* Biru (warna utama, selaras dengan biru tua di logo) */
  --blue-700: #1A73E8;
  --blue-500: #4285F4;
  --blue-200: #AECBFA;
  --blue-100: #E8F0FE;
  /* Merah (CTA Daftar Online, hinomaru) */
  --red-700: #C5221F;
  --red-600: #D93025;
  --red-500: #EA4335;
  /* Kuning */
  --yellow-500: #FBBC05;
  --yellow-100: #FEF7E0;
  --yellow-ink: #8A5A00;
  /* Hijau */
  --green-600: #1E8E3E;
  --green-500: #34A853;
  --green-100: #E6F4EA;
  /* Abu-abu Google */
  --gray-900: #202124;
  --gray-700: #3C4043;
  --gray-500: #5F6368;
  --gray-200: #DADCE0;
  --gray-50:  #F8F9FA;
  --white:    #FFFFFF;

  /* Peran */
  --surface:        var(--white);
  --surface-tint:   var(--gray-50);
  --surface-hero:   var(--yellow-500);
  --surface-strong: var(--blue-700);
  --text:           var(--gray-900);
  --text-muted:     var(--gray-500);
  --heading:        var(--gray-900);
  --on-strong:      var(--white);
  --on-strong-muted:#E8EAED;
  --primary:        var(--blue-700);
  --cta:            var(--red-600);
  --cta-hover:      var(--red-700);
  --line:           var(--gray-200);
  --focus:          var(--blue-500);

  /* Tipografi: sans modern + Mincho untuk label Jepang (sentuhan klasik) */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-jp:      "Shippori Mincho", "Noto Serif JP", serif;
  --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.3125rem;
  --fs-xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  --fs-hero: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);

  /* Ruang & bentuk */
  --gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  --section-y: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
  --container: 1160px;
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --shadow: 0 1px 2px rgb(60 64 67 / .15), 0 2px 6px 2px rgb(60 64 67 / .08);
  --header-h: 72px;
  color-scheme: light;
  --google-bar: linear-gradient(90deg, var(--blue-500) 0 25%, var(--red-500) 25% 50%, var(--yellow-500) 50% 75%, var(--green-500) 75% 100%);
}