/* ============================================================
   SHORTO — Design Tokens
   Sumber kebenaran tunggal untuk tipografi, warna, spacing,
   grid, dan easing. Diturunkan langsung dari Design Brief & PRD
   (Seksi 3, 4, 5, 8). Jangan menambahkan nilai di luar token ini.
   ============================================================ */

:root {
  /* ----- Tipografi: Typeface (Seksi 3.1) ----- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ----- Tipografi: Type Scale (Seksi 3.2 / 3.3) ----- */
  --text-display: 80px;
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-h4: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;
  --text-micro: 11px;

  /* ----- Warna (Seksi 4.2) ----- */
  --color-ink: #111111;        /* teks utama, CTA filled */
  --color-white: #ffffff;      /* background primer */
  --color-off-white: #f5f5f3;  /* background sekunder, card */
  --color-dark-gray: #333333;  /* teks sekunder penting */
  --color-mid-gray: #aaaaaa;   /* caption, metadata non-kritis */
  --color-light-gray: #dddddd; /* border, divider */

  /* Token tambahan yang dipakai PRD namun belum terdaftar di palet:
     #555555 muncul di tagline hero (7.1) & process description (6.8).
     Didaftarkan resmi di sini agar konsisten. */
  --color-gray-mid-dark: #555555;

  /* ----- Spacing: Base 8 (Seksi 5.1) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 160px;

  /* ----- Grid (Seksi 5.2) ----- */
  --container-max: 1440px;
  --content-max: 1200px;
  --grid-columns: 12;
  --gutter: 32px;
  --margin: 80px;

  /* ----- Easing Curves (Seksi 8.1) ----- */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  /* ----- Layout konstan ----- */
  --nav-height: 72px;
}

@media (max-width: 1024px) {
  :root {
    --margin: 40px;
    --gutter: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --margin: 20px;
    --gutter: 16px;

    /* Penurunan type scale untuk mobile — menjaga proporsi,
       tetap >= 14px untuk body (checklist Mobile). */
    --text-display: 48px;
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 22px;
  }
}