/* ============================================================
   00-TOKENS.CSS — SANJAI ANNA  ·  rev.3 "MARAWA"
   Seluruh sistem diturunkan dari ICON.png. Nol inspirasi lain.

   DNA yang diukur dari file logo (bukan dikira-kira):
   • Sudut  : SEMUA diagonal = 30° dari vertikal / 60° dari horizontal.
              merah 30.00° · kuning 29.72°/30.01° · hitam 29.97°.
              Segitiga kuning bersudut puncak 59.74° ≈ ekuilateral.
   • Modul  : tebal stroke merah 197px, hitam 198px pada mark 1843px
              → stroke = lebar mark ÷ 9.35. Satu modul, konstan.
   • Rasio  : putih 89.05% kanvas. Dari tintanya:
              hitam 59.9 : merah 27.7 : kuning 12.3 ≈ 6 : 3 : 1.
   • Asimetri: apex hitam x=1502, kuning x=1500 (sejajar),
              merah x=1298 → offset 204px ≈ TEPAT satu modul stroke.
              Offset selalu kelipatan modul. Nggak pernah sembarang.
   • Kuning : satu-satunya bidang MASSIF. Hitam & merah adalah stroke.
              Kuning paling kecil, paling terang, di titik fokus optis.
   ============================================================ */

@font-face { font-family:'Archivo-fallback'; src: local('Arial');
  size-adjust:96%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }
@font-face { font-family:'PJS-fallback'; src: local('Arial');
  size-adjust:102%; ascent-override:96%; descent-override:26%; line-gap-override:0%; }

:root {
  /* ---------- 1. EMPAT WARNA. TITIK. ---------- */
  --sa-putih:  #FFFFFF;   /* ruang napas — 89% kanvas logo */
  --sa-hitam:  #000000;   /* fondasi — 60% tinta */
  --sa-merah:  #ED1C24;   /* nafsu makan — 28% tinta */
  --sa-kuning: #EDE11A;   /* cahaya emosional — 12% tinta, dipakai paling sedikit */

  /* Turunan kerja — hanya untuk keterbacaan & state. Bukan warna baru. */
  --sa-putih-teks: #F2F2F2; /* teks di atas hitam; meredam halation */
  --sa-abu-gelap:  #8C8C8C; /* muted di field hitam   — 6.25:1 */
  --sa-abu-terang: #5C5C5C; /* muted di field putih   — 6.69:1 */
  --sa-merah-tekan:#B4141B; /* hover/pressed saja */
  --sa-hitam-tekan:#2B2B2B;
  --sa-hitam-2: #141414;   /* surface di field hitam */
  --sa-hitam-3: #1C1C1C;   /* hover ikon di header */

  /* ---------- 2. HUKUM RASIO ---------- */
  --sa-bg:           var(--sa-putih);
  --sa-fg:           var(--sa-hitam);          /* 21.00:1 AAA */
  --sa-fg-muted:     var(--sa-abu-terang);
  --sa-line:         var(--sa-hitam);
  --sa-cta-bg:       var(--sa-merah);
  --sa-cta-fg:       var(--sa-putih);
  --sa-cta-bg-hover: var(--sa-hitam);
  --sa-focus:        var(--sa-hitam);
  --sa-surface:      #F1F1F1;
  --sa-cahaya:       var(--sa-kuning);         /* aksen */

  --sa-success: var(--sa-hitam);
  --sa-warning: var(--sa-kuning);
  --sa-danger:  var(--sa-merah);
  --sa-scrim:   rgba(0,0,0,.78);
  --sa-grain:   .045;

  /* ---------- 3. TIPOGRAFI ---------- */
  --sa-font-display: 'Archivo','Archivo-fallback',system-ui,sans-serif;
  --sa-font-body:    'Plus Jakarta Sans','PJS-fallback',system-ui,sans-serif;

  /* rev.4 — skala diturunkan.
     Sebelumnya h2 mencapai 6rem dan mega 13rem. Pada layar 1440px itu berarti
     judul dua kata memakan sepertiga tinggi layar, memaksa headline pecah lima
     baris, dan menyisakan lubang kosong di bawahnya. Ukuran besar tidak
     membuat halaman terasa mahal; ia membuat halaman terasa seperti poster.
     Rasio antar-langkah dipertahankan, hanya puncaknya yang dipangkas. */
  --sa-fs-mega:    clamp(2.75rem, 8vw, 6rem);      /* satu per halaman */
  --sa-fs-hero:    clamp(2.25rem, 5.6vw, 4.25rem);
  --sa-fs-h2:      clamp(1.75rem, 3.6vw, 2.875rem);
  --sa-fs-h3:      clamp(1.1875rem, 1.9vw, 1.5rem);
  --sa-fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --sa-fs-body:    1rem;
  --sa-fs-body-sm: .9375rem;
  --sa-fs-label:   .75rem;
  --sa-fs-price:   1.125rem;

  /* Leading dilonggarkan. Pada .82 descender baris atas menabrak ascender
     baris bawah begitu judul pecah dua baris. */
  --sa-lh-mega: .94;
  --sa-lh-hero: 1.0;
  --sa-lh-h2:   1.06;
  --sa-lh-h3:   1.28;
  --sa-lh-body: 1.65;
  --sa-measure: 68ch;

  /* ---------- 4. RUANG ---------- */
  --sa-space-1:4px;  --sa-space-2:8px;   --sa-space-3:12px;  --sa-space-4:16px;
  --sa-space-5:24px; --sa-space-6:32px;  --sa-space-7:48px;  --sa-space-8:64px;
  --sa-space-9:96px; --sa-space-10:128px;--sa-space-11:176px;--sa-space-12:240px;

  /* rev.4 — ritme vertikal dirapatkan.
     200px normal dan 288px lapang berarti dua bab berurutan menyisakan hampir
     500px ruang kosong di antaranya. Yang dibaca sebagai "belum selesai"
     sebenarnya adalah jarak, bukan konten yang kurang. Perbandingan
     rapat : normal : lapang tetap 3 : 4 : 5. */
  --sa-y-rapat: clamp(44px,  5.5vw,  72px);   /* kompresi */
  --sa-y:       clamp(64px,  7.5vw,  96px);   /* normal   */
  --sa-y-lapang:clamp(88px, 10vw,   128px);   /* ekspansi */

  /* ---------- 5. GRID ---------- */
  /* 1560px membuat baris teks terlalu panjang untuk dibaca nyaman. */
  --sa-container: 1340px;
  --sa-gutter: 20px;

  /* ---------- 6. GEOMETRI LOGO ---------- */
  --sa-sudut: 60deg;        /* sisi segitiga logo, dari horizontal */
  --sa-lari: .5774;         /* 1/tan(60°) — run horizontal per 1 tinggi */
  --sa-modul: clamp(20px, 2.8vw, 40px);            /* tebal stroke logo */
  --sa-pahat: clamp(28px, 4vw, 60px);              /* tinggi pahatan sudut */
  --sa-pahat-x: calc(var(--sa-pahat) * var(--sa-lari));
  --sa-garis: 2px;          /* stroke logo tebal & rata */
  --sa-garis-tebal: 6px;
  --sa-radius: 0;

  /* ---------- 7. MOTION ---------- */
  --sa-dur-micro:140ms; --sa-dur-ui:220ms; --sa-dur-reveal:460ms; --sa-dur-story:760ms;
  --sa-ease-out: cubic-bezier(.16,1,.3,1);
  --sa-ease-in:  cubic-bezier(.6,0,1,.4);
  --sa-ease-cut: cubic-bezier(.9,0,.1,1);   /* gerak "pahat" */

  --sa-z-thread:40; --sa-z-header:60; --sa-z-sticky:70; --sa-z-drawer:90;
}

@media (min-width:640px)  { :root{ --sa-gutter:28px } }
@media (min-width:768px)  { :root{ --sa-gutter:40px } }
@media (min-width:1024px) { :root{ --sa-gutter:56px } }
@media (min-width:1440px) { :root{ --sa-gutter:64px } }

/* ============================================================
   TIGA ENVIRONMENT.
   ============================================================ */

.sa-env--putih {
  --sa-bg: var(--sa-putih);
  --sa-fg: var(--sa-hitam);              /* 21.00:1 */
  --sa-fg-muted: var(--sa-abu-terang);   /*  6.69:1 */
  --sa-line: var(--sa-hitam);
  --sa-cta-bg: var(--sa-merah);
  --sa-cta-fg: var(--sa-putih);
  --sa-cta-bg-hover: var(--sa-hitam);
  --sa-focus: var(--sa-hitam);
  --sa-surface: #F1F1F1;
  --sa-cahaya: var(--sa-kuning);
}

.sa-env--hitam {
  --sa-bg: var(--sa-hitam);
  --sa-fg: var(--sa-putih-teks);         /* 18.76:1 */
  --sa-fg-muted: var(--sa-abu-gelap);    /*  6.25:1 */
  --sa-line: var(--sa-putih-teks);
  --sa-cta-bg: var(--sa-merah);
  --sa-cta-fg: var(--sa-putih);
  --sa-cta-bg-hover: var(--sa-kuning);
  --sa-focus: var(--sa-kuning);
  --sa-surface: #141414;
  --sa-cahaya: var(--sa-kuning);         /* 15.39:1 */
}

.sa-env--merah {
  --sa-bg: var(--sa-merah);
  --sa-fg: var(--sa-putih);
  --sa-fg-muted: rgba(255, 255, 255, 0.85);
  --sa-line: rgba(255, 255, 255, 0.25);
  --sa-cta-bg: var(--sa-kuning);
  --sa-cta-fg: var(--sa-hitam);
  --sa-cta-bg-hover: var(--sa-putih);
  --sa-cta-fg-hover: var(--sa-hitam);
  --sa-focus: var(--sa-kuning);
  --sa-surface: rgba(255, 255, 255, 0.12);
  --sa-cahaya: var(--sa-kuning);
}