/* ==========================================================================
   GO by JIYVI — Prototype 02
   Design System: PLAYFUL GEOMETRIC
   "Stable Grid, Wild Decoration" — Memphis modern.
   Semua nilai warna, radius, dan shadow ada di sini; tidak ada hex mentah
   di luar file ini.
   ========================================================================== */

:root {
  /* ---------- Warna inti ---------- */
  --cream: #fffdf5;        /* paper / background */
  --paper: #ffffff;        /* card */
  --ink: #1e293b;          /* foreground + border gelap */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;    /* muted */
  --slate-200: #e2e8f0;    /* border */
  --slate-300: #cbd5e1;    /* border input */
  --slate-400: #94a3b8;
  --slate-500: #64748b;    /* muted foreground */
  --slate-600: #475569;

  /* ---------- Warna aksen ----------
     primary = warna utama aksi (soft pink, senada logo)
     pink / amber / mint = rotasi dekoratif ala "confetti" */
  --primary: #ce3e76;
  --pink: #f472b6;
  --amber: #fbbf24;
  --mint: #34d399;

  /* ---------- Wadah aksen (tint) ---------- */
  --primary-soft: #ffd9e4;
  --pink-soft: #fce7f3;
  --amber-soft: #fef3c7;
  --mint-soft: #d1fae5;
  --slate-soft: #f1f5f9;

  --danger: #ef4444;
  --danger-soft: #fee2e2;

  /* ---------- Tipografi ---------- */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Skala 1.25 (Major Third) */
  --t-xs: 0.75rem;      /* 12 */
  --t-sm: 0.8125rem;    /* 13 */
  --t-base: 0.875rem;   /* 14 */
  --t-md: 1rem;         /* 16 */
  --t-lg: 1.25rem;      /* 20 */
  --t-xl: 1.5625rem;    /* 25 */
  --t-2xl: 1.9531rem;   /* 31 */
  --t-3xl: 2.4414rem;   /* 39 */
  --t-4xl: 3.0518rem;   /* 49 */
  --t-5xl: 3.8147rem;   /* 61 */

  /* ---------- Radius ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* ---------- Border ---------- */
  --bw: 2px;
  --bw-thick: 3px;

  /* ---------- "Pop" shadow (keras, tanpa blur) ---------- */
  --pop-xs: 2px 2px 0 0 var(--ink);
  --pop: 4px 4px 0 0 var(--ink);
  --pop-md: 5px 5px 0 0 var(--ink);
  --pop-lg: 8px 8px 0 0 var(--ink);
  --pop-soft: 6px 6px 0 0 var(--slate-200);
  --pop-pink: 7px 7px 0 0 var(--pink);
  --pop-amber: 7px 7px 0 0 var(--amber);
  --pop-mint: 7px 7px 0 0 var(--mint);
  --pop-primary-soft: 7px 7px 0 0 var(--primary-soft);

  /* ---------- Motion ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 150ms;
  --d: 300ms;

  /* ---------- Layout ---------- */
  --shell-max: 1160px;
  --topbar-h: 76px;
  --side-w: 268px;
  --bottomnav-h: 76px;
}

/* ==========================================================================
   Skala tipografi
   ========================================================================== */

.t-5xl { font-size: var(--t-5xl); line-height: 1.02; }
.t-4xl { font-size: var(--t-4xl); line-height: 1.05; }
.t-3xl { font-size: var(--t-3xl); line-height: 1.1; }
.t-2xl { font-size: var(--t-2xl); line-height: 1.15; }
.t-xl { font-size: var(--t-xl); line-height: 1.2; }
.t-lg { font-size: var(--t-lg); line-height: 1.35; }
.t-md { font-size: var(--t-md); line-height: 1.5; }
.t-base { font-size: var(--t-base); line-height: 1.55; }
.t-sm { font-size: var(--t-sm); line-height: 1.55; }
.t-xs { font-size: var(--t-xs); line-height: 1.5; }

.t-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
.t-heading { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.t-label { font-weight: 700; }
.t-muted { color: var(--slate-500); }
.t-ink { color: var(--ink); }
.t-primary { color: var(--primary); }
.t-pink { color: var(--pink); }
.t-amber { color: var(--slate-600); }      /* amber terlalu terang untuk teks */
.t-mint { color: #059669; }
.t-error-text { color: var(--danger); }
.t-num { font-variant-numeric: tabular-nums; }
.t-mono { font-family: var(--font-mono); letter-spacing: 0.06em; }

/* Label kecil uppercase — gaya Memphis */
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Garis arch — pemisah pilihan untuk pemanis */
.arch {
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
}
.leaf-tr {
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  border-bottom-right-radius: var(--r-xl);
  border-bottom-left-radius: 0;
}
.blob { border-radius: 58% 42% 38% 62% / 48% 44% 56% 52%; }