/* cid-tokens v3 · 2026-10-02 · "Langit Malam" · warna diturunkan dari logo CloudID Studio
   Sumber keputusan: docs/design-system/cloudid-studio/MASTER.md */
:root{
  color-scheme: dark;

  /* warna logo */
  --krem:#FAF2E7; --langit:#56B7F7; --hitam-logo:#0D0D0D;

  /* biru */
  --malam-950:#050E22; --malam-900:#071430; --malam-800:#0B1D40; --malam-700:#10295A; --malam-600:#1A3A75;
  --langit-terang:#8DD0FB; --langit-tua:#0A5CB0; --langit-tua-2:#0A4F99;
  --pucat:#EAF4FE; --pucat-2:#D7E9FB; --putih:#FFFFFF;
  --krem-2:#B4C3DA; --tinta:#071430; --tinta-2:#3B5272;

  /* tipe */
  --font-display:"Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-teks:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-h1:clamp(2.9rem, 1.5rem + 4.6vw, 5.5rem); /* "digarap serius." = 6,56em: harus muat 2 baris di kolom hero */
  --f-h2:clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
  --f-h3:1.25rem; --f-lead:clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --f-teks:1.0625rem; --f-kecil:.875rem; --f-label:.8125rem;

  /* spasi (density 3: lapang) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:20px; --wadah:1200px; --baris:62ch;
  --jarak-section:clamp(5rem, 3rem + 6vw, 9rem);
  --tinggi-kepala:72px;

  /* bentuk (flat: tanpa bayangan) */
  --r-kartu:24px; --r-besar:32px; --r-tombol:999px;

  /* gerak */
  --cepat:150ms; --sedang:250ms; --lambat:450ms;
  --ease-keluar:cubic-bezier(.22, 1, .36, 1);
  --ease-pantul:cubic-bezier(.34, 1.56, .64, 1);
}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--gutter:48px; --f-teks:1.125rem}}

/* permukaan: dipasang di header, section, footer lewat data-permukaan */
[data-permukaan]{background:var(--latar); color:var(--teks)}
[data-permukaan="malam"],[data-permukaan="malam-2"]{
  color-scheme:dark;
  --latar:var(--malam-900); --teks:var(--krem); --teks-2:var(--krem-2);
  --aksen:var(--langit); --tautan:var(--langit); --fokus:var(--langit);
  --garis:rgba(141,208,251,.16); --garis-kuat:var(--langit);
  --kartu:var(--malam-800); --kartu-garis:rgba(141,208,251,.16);
  --tombol-bg:var(--langit); --tombol-bg-hover:var(--langit-terang); --tombol-teks:var(--malam-900);
  --tombol2-garis:var(--langit); --tombol2-teks:var(--krem); --tombol2-hover:rgba(86,183,247,.14);
  --ikon-bg:rgba(86,183,247,.14); --ikon:var(--langit);
}
[data-permukaan="malam-2"]{--latar:var(--malam-800); --kartu:var(--malam-700)}
[data-permukaan="pucat"]{
  color-scheme:light;
  --latar:var(--pucat); --teks:var(--tinta); --teks-2:var(--tinta-2);
  --aksen:var(--langit-tua); --tautan:var(--langit-tua); --fokus:var(--langit-tua);
  --garis:rgba(7,20,48,.12); --garis-kuat:var(--langit-tua);
  --kartu:var(--putih); --kartu-garis:rgba(7,20,48,.10);
  --tombol-bg:var(--langit-tua); --tombol-bg-hover:var(--langit-tua-2); --tombol-teks:var(--putih);
  --tombol2-garis:var(--tinta); --tombol2-teks:var(--tinta); --tombol2-hover:rgba(7,20,48,.06);
  --ikon-bg:var(--pucat-2); --ikon:var(--langit-tua);
}
[data-permukaan="langit"]{
  color-scheme:light;
  --latar:var(--langit); --teks:var(--tinta); --teks-2:var(--tinta);
  --aksen:var(--tinta); --tautan:var(--tinta); --fokus:var(--tinta);
  --garis:rgba(7,20,48,.22); --garis-kuat:var(--tinta);
  --kartu:rgba(255,255,255,.28); --kartu-garis:rgba(7,20,48,.18);
  --tombol-bg:var(--malam-900); --tombol-bg-hover:var(--malam-700); --tombol-teks:var(--krem);
  --tombol2-garis:var(--tinta); --tombol2-teks:var(--tinta); --tombol2-hover:rgba(7,20,48,.08);
  --ikon-bg:rgba(7,20,48,.10); --ikon:var(--tinta);
}