/* Rene Laundry · token desain (Hallmark, 1 Okt 2026).
 * Semua warna, huruf, jarak, dan gerak di rene.css merujuk ke sini — jangan menulis nilai mentah di sana.
 * Jangkar warna: teal merek #05adaa = oklch(67.6% 0.115 192.6). */
:root {
  /* Kertas & tinta — netral yang condong ke teal */
  --color-paper:        oklch(98.6% 0.005 195);
  --color-paper-2:      oklch(96.4% 0.010 195);
  --color-paper-mint:   oklch(94.6% 0.030 185);
  --color-paper-butter: oklch(95.4% 0.045 92);
  --color-rule:         oklch(88% 0.014 200);
  --color-rule-butter:  oklch(84% 0.050 92);
  --color-muted:        oklch(44% 0.022 212);
  --color-ink:          oklch(23% 0.032 218);
  --color-ink-soft:     oklch(31% 0.035 216);

  /* Aksen — satu warna, dipakai hemat */
  --color-accent:       oklch(67.6% 0.115 192.6);   /* teal merek: tanda, garis, titik */
  --color-accent-deep:  oklch(43% 0.080 196);       /* teal gelap: teks/tautan yang harus terbaca */
  --color-focus:        oklch(52% 0.130 200);
  --color-star:         oklch(78% 0.150 82);

  /* Status — pasangan pucat + tinta (halaman kerja) */
  --color-paper-rose:   oklch(94.5% 0.030 22);
  --color-ink-rose:     oklch(42% 0.130 26);
  --color-ink-mint:     oklch(36% 0.070 190);
  --color-ink-butter:   oklch(40% 0.080 80);

  /* Di atas pita gelap */
  --color-on-ink:       oklch(96% 0.008 195);
  --color-on-ink-muted: oklch(78% 0.020 200);
  --color-rule-on-ink:  oklch(38% 0.030 215);

  /* Huruf — 2+1: judul, isi, satu tulisan tangan (maks. 2 tempat) */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Caveat", "Segoe Print", cursive;

  --text-input:     1rem;       /* kolom isian tetap 16px agar iPhone tidak memperbesar layar */
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.375rem;
  --text-h2:        clamp(1.75rem, 2.1vw + 1.05rem, 2.75rem);
  --text-display:   clamp(2.5rem, 4.4vw + 1rem, 4.5rem);
  --text-statement: clamp(1.875rem, 4.6vw + 0.5rem, 3.5rem);
  --text-note:      clamp(1.25rem, 1vw + 1rem, 1.5rem);

  /* Jarak — skala 4pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8.5rem;

  --pil-clear:   5.5rem;   /* ruang di bawah pil navigasi; tidak ikut dirapatkan di ponsel */
  --page-max:    72rem;
  --page-narrow: 40rem;
  --page-gutter: clamp(1.25rem, 4.5vw, 3rem);

  --radius-photo: 1.25rem;
  --radius-card:  0.875rem;
  --radius-pill:  999px;
  --rule-hair:    1px;

  --shadow-whisper: 0 1px 2px oklch(23% 0.032 218 / 0.06);
  --shadow-pill:    0 10px 28px -14px oklch(23% 0.032 218 / 0.35);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --z-raised: 10;
  --z-sticky: 200;
}

/* Layar ponsel: huruf dan jarak dirapatkan satu tingkat (2 Okt 2026).
 * Diatur di token supaya beranda, lacak, dan profil ikut sekaligus. */
@media (max-width: 40rem) {
  :root {
    --text-sm:        0.8125rem;
    --text-base:      0.9375rem;
    --text-md:        1rem;
    --text-lg:        1.125rem;
    --text-h2:        1.5rem;
    --text-display:   2.125rem;
    --text-statement: 1.625rem;
    --text-note:      1.125rem;

    --space-lg:  1.25rem;
    --space-xl:  1.75rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3.5rem;
    --space-4xl: 5rem;

    --page-gutter: 1rem;
  }
}