/* ============================================================
   TRANOVA — TOKEN SITUS
   ------------------------------------------------------------
   JANGAN mendefinisikan warna baru di berkas ini.
   Sumber kebenaran tunggal = css/ds-tokens.css (Design System
   v2.1, salinan dari Workspace/Internal/Brand Tranova/
   Design-System/tokens.css). Berkas ini hanya memetakan token
   sistem itu ke nama yang dipakai CSS situs, plus ukuran yang
   khusus web (skala tipe cair, lebar kontainer, durasi animasi).

   Kalau butuh warna yang belum ada: ubah design system-nya,
   lalu salin ulang ds-tokens.css ke sini. Bukan sebaliknya.
   ============================================================ */

@import url("ds-tokens.css");

:root {
  /* ---------- PERMUKAAN (semua dari sistem) ---------- */
  --bg-page:     var(--paper);        /* #F4F1EC kertas — kanvas utama */
  --bg-raised:   var(--tv-white);     /* #FFFFFF kartu di atas kertas   */
  --bg-inset:    var(--paper-deep);   /* #E8E3DD panel/inset            */
  --bg-dark:     var(--teal-900);     /* #074038 panel gelap            */
  --bg-darker:   var(--teal-950);     /* #062A24                        */
  --bg-brand:    var(--fill-brand);   /* #06A089 bidang teal            */

  /* ---------- TEKS ---------- */
  --tx:          var(--ink);          /* #000000 di latar terang */
  --tx-muted:    var(--ink-muted);    /* #5D5B59                 */
  --tx-invert:   var(--ink-invert);   /* #FFFFFF di latar gelap  */
  --tx-brand:    var(--text-brand);   /* #075D50 — SATU-SATUNYA teal untuk huruf */
  --tx-on-brand: var(--tv-black);     /* teks di atas #06A089 selalu hitam */

  /* teks di latar gelap */
  --tx-dark-muted: rgba(255,255,255,.72);
  --tx-dark-faint: rgba(255,255,255,.46);

  /* ---------- LAPISAN TRANSPARAN (semua untuk latar TERANG) ----------
     Nama lama (--a-white-70 dst) berasal dari situs versi gelap dan jadi
     menyesatkan setelah pindah ke kertas: ia dipakai untuk teks HITAM.
     Diganti nama supaya yang dibaca sama dengan yang terjadi.          */
  --tx-90: rgba(0,0,0,.90);
  --tx-70: rgba(0,0,0,.66);
  --tx-45: rgba(0,0,0,.48);
  --line-1: rgba(0,0,0,.14);
  --line-2: rgba(0,0,0,.11);
  --fill-1: rgba(0,0,0,.04);
  --fill-2: rgba(0,0,0,.055);
  --scrim:  rgba(0,0,0,.72);          /* tirai di atas foto — tetap gelap */
  --line-brand: rgba(6,160,137,.34);
  --fill-brand-soft: rgba(6,160,137,.10);

  /* ---------- GARIS ---------- */
  --line:        var(--hairline);
  --line-invert: var(--hairline-invert);

  /* ---------- GRADASI ---------- */
  --grad-brand: linear-gradient(135deg, var(--fill-brand) 0%, var(--tv-light-teal) 100%);
  --grad-mesh:  linear-gradient(115deg, var(--tv-light-teal) 0%, var(--fill-brand) 42%, var(--tv-pale-blue) 100%);
  --grad-deep:  linear-gradient(135deg, var(--teal-900) 0%, var(--teal-700) 100%);

  /* ---------- TIPOGRAFI: skala cair khusus web ----------
     Guideline mengunci hierarki dalam pt untuk cetak; web butuh
     skala yang ikut lebar layar. Rasionya dipertahankan.        */
  --font-sans:  var(--font-display);
  /* --font-serif sudah didefinisikan di ds-tokens.css; jangan ditimpa */

  --fs-display: clamp(3.25rem, 9vw, 6.25rem);
  --fs-h1:      clamp(2.75rem, 6.5vw, 4.5rem);
  --fs-h2:      clamp(2.125rem, 4.5vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2rem);
  --fs-body-lg: clamp(1.125rem, 1.6vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.4vw, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;
  --fs-micro:   0.6875rem;

  --ls-label: var(--track-meta);      /* .18em */
  --ls-tight: var(--track-display);   /* -.035em */
  /* --lh-display juga dari ds-tokens.css (0.88) */
  --lh-heading: 1.06;
  --lh-body: 1.65;

  /* ---------- SPASI (peta ke skala sistem) ---------- */
  --sp-1: var(--s1); --sp-2: var(--s2); --sp-3: var(--s3);
  --sp-4: var(--s4); --sp-5: var(--s5); --sp-6: var(--s6);
  --sp-7: var(--s7); --sp-8: var(--s8); --sp-9: var(--s9);

  --section-pad:   clamp(5rem, 11vh, 8rem);
  --container-max: 76rem;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ---------- BENTUK ---------- */
  --r-lg: var(--r-card);    /* 20px */
  --r-md: var(--r-inset);   /* 12px */
  --r-sm: var(--r-frame);   /*  6px */

  --shadow-nav:  0 10px 40px rgba(0,0,0,.10);
  --shadow-card: 0 18px 48px rgba(0,0,0,.07);

  /* ---------- GERAK ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
  --dur-med: 520ms;
  --dur-slow: 800ms;
  --stagger: 120ms;

  /* ---------- LAPIS ---------- */
  --z-blobs: 0; --z-content: 2; --z-nav: 50; --z-overlay: 60;
}