/* tokens.css — design system Polara "Polara Purr / Sticker Pop".
   Acuan canonical: spec/ASSET-BRIEF.md. Semua warna/font = CSS variables
   biar gampang diutak-atik (redesign = ubah token, bukan hardcode). */
:root {
  /* ── palet brand ── */
  --pink:        #ff8fbd;   /* bubblegum pink — primary/CTA */
  --pink-soft:   #ffc2d8;
  --pink-deep:   #ec5e9e;
  --blue:        #8fd3ff;   /* sky blue */
  --butter:      #ffe26f;   /* soft butter */
  --lilac:       #cab8ff;   /* lilac */
  --cream:       #fff7ef;   /* warm cream — background */
  --cream-2:     #fffaf4;
  --white:       #ffffff;
  --brown:       #4b2e1f;   /* cozy brown — teks + outline */
  --brown-soft:  #7a4b35;

  /* ── semantik (dipakai shell) ── */
  --bg:          var(--cream);
  --surface:     var(--white);
  --text:        var(--brown);
  --muted:       #6b4a37;   /* a11y: kontras ≥4.5:1 di atas cream & pink-soft */
  --accent:      var(--pink);
  --accent-dim:  rgba(255, 143, 189, 0.30);
  --accent-strong: var(--pink-deep);
  --border:      rgba(75, 46, 31, 0.14);
  --outline:     #4b2e1f;   /* garis tepi stiker */
  --proof-paper: #fffdf9;
  --proof-cream: #fff7ef;
  --proof-ink: #4b2e1f;
  --proof-muted: #70584b;
  --proof-hairline: rgba(75, 46, 31, 0.16);
  --proof-pink: #ff8fbd;
  --proof-blue: #8fd3ff;
  --proof-butter: #ffe26f;
  --proof-lilac: #cab8ff;
  --proof-mat: #efe4d9;
  --proof-mat-edge: rgba(75, 46, 31, 0.22);
  --proof-registration: rgba(75, 46, 31, 0.30);
  --proof-mat-shadow: 0 24px 54px rgba(75, 46, 31, 0.14), 0 5px 14px rgba(75, 46, 31, 0.08);
  --proof-desk: #f2e6da;
  --proof-desk-deep: #ead9ca;
  --proof-paper-raised: #fffefa;
  --proof-focus: #176a9e;
  --proof-shadow-low: 0 10px 28px rgba(75, 46, 31, 0.09), 0 2px 7px rgba(75, 46, 31, 0.05);

  /* ── bentuk ── */
  --radius:      22px;
  --radius-lg:   34px;
  --radius-pill: 999px;

  /* ── bayangan (efek stiker/clay) ── */
  --shadow-sticker: 0 8px 0 rgba(75, 46, 31, 0.07), 0 18px 40px rgba(75, 46, 31, 0.14);
  --shadow-soft:    0 12px 30px rgba(75, 46, 31, 0.12);
  --ring:           0 0 0 4px rgba(255, 143, 189, 0.38);

  /* ── tipografi ── */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-ui:      'Inter', 'Nunito', system-ui, sans-serif;
}