/* ═══════════════════════════════════════════
   DESIGN TOKENS

   Ubah warna, radius, dan shadow di sini saja.
   Semua komponen otomatis ikut berubah.
   ═══════════════════════════════════════════ */

:root {
    /* ── Backgrounds ── */
    --bg-page:      #faf7f5;
    --bg-card:      #ffffff;
    --bg-subtle:    #fdf5f5;
    --bg-input:     #fdfafa;

    /* ── Accent (warna utama brand) ── */
    --accent:           #d4a0a0;
    --accent-hover:     #c48b8b;
    --accent-active:    #b07070;
    --accent-light:     #f5e8e8;

    /* ── Text ── */
    --heading:      #2d2d2d;
    --label:        #6b5555;
    --body:         #6b5555;
    --muted:        #9a8a8a;
    --placeholder:  #c0b0b0;

    /* ── Borders ── */
    --border:       #e8d8d8;
    --border-card:  #f0e8e8;
    --divider:      #f0e8e8;

    /* ── Status ── */
    --green:        #16a34a;
    --green-bg:     #f0fdf4;
    --green-border: #bbf7d0;

    /* ── Radius ── */
    --radius-card:      20px;
    --radius-section:   16px;
    --radius-input:     14px;
    --radius-badge:     12px;

    /* ── Shadows ── */
    --shadow-card:          0 1px 3px rgba(180,140,140,0.08), 0 1px 2px rgba(180,140,140,0.06);
    --shadow-card-hover:    0 8px 30px rgba(180,140,140,0.12), 0 4px 12px rgba(180,140,140,0.08);
    --shadow-button:        0 2px 8px rgba(212,160,160,0.25);
    --shadow-hero:          0 20px 60px rgba(212,160,160,0.2);
}