/* ============================================================
   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;

  --sa-fs-mega:    clamp(3.5rem, 15vw, 13rem);   /* satu per halaman */
  --sa-fs-hero:    clamp(2.75rem, 10.5vw, 8rem);
  --sa-fs-h2:      clamp(2.5rem, 7.5vw, 6rem);
  --sa-fs-h3:      clamp(1.5rem, 3vw, 2.25rem);
  --sa-fs-lead:    clamp(1.125rem, 2.1vw, 1.625rem);
  --sa-fs-body:    1.0625rem;
  --sa-fs-body-sm: 1rem;
  --sa-fs-label:   .8125rem;
  --sa-fs-price:   1.25rem;

  --sa-lh-mega: .82;
  --sa-lh-hero: .88;
  --sa-lh-h2:   .92;
  --sa-lh-h3:   1.1;
  --sa-lh-body: 1.62;
  --sa-measure: 62ch;

  /* ---------- 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;

  --sa-y-rapat: clamp(56px,  7vw,  96px);   /* kompresi */
  --sa-y:       clamp(96px, 14vw, 200px);   /* normal   */
  --sa-y-lapang:clamp(140px,20vw, 288px);   /* ekspansi */

  /* ---------- 5. GRID ---------- */
  --sa-container: 1560px;
  --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(26px, 4.2vw, 68px);            /* tebal stroke logo */
  --sa-pahat: clamp(36px, 6.4vw, 104px);           /* 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:80px } }

/* ============================================================
   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-hitam);              /* 4.79:1 AA */
  --sa-fg-muted: #4A0B0E;
  --sa-line: var(--sa-hitam);
  --sa-cta-bg: var(--sa-hitam);
  --sa-cta-fg: var(--sa-putih);
  --sa-cta-bg-hover: var(--sa-putih);
  --sa-focus: var(--sa-hitam);
  --sa-surface: rgba(0,0,0,.09);
  --sa-cahaya: var(--sa-kuning);         /* 3.21:1 */
}