/* ============================================================
   cucian.web.id — Design tokens
   Style: "Jemur" laundry app (Figma community, by alverhothasi)
   Mobile-first. Pink accent, navy ink, white rounded cards.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --bg:            #F3F3F3;
  --bg-soft:       #ECECEE;
  --surface:       #FFFFFF;
  --surface-2:     #F7F7F9;

  /* --- Ink --- */
  --navy:          #0E1446;
  --navy-2:        #2A3160;
  --muted:         #898B96;
  --muted-2:       #B5B7BE;

  /* --- Brand: Pink --- */
  --pink:          #F691CD;
  --pink-deep:     #E672B7;
  --pink-soft:     #FDE7F3;
  --pink-tint:     #FEF3F9;

  /* --- Semantic --- */
  --mint:          #06D6A0;
  --mint-soft:     #D6F7EC;
  --coral:         #FF5530;
  --coral-soft:    #FFE4DC;
  --amber:         #FFB800;
  --amber-soft:    #FFF3D6;
  --sky:           #53A5DF;
  --sky-soft:      #A3D4F7;
  --sky-bg:        #E3F2FD;

  /* --- Lines --- */
  --hairline:      #EDEDF0;
  --hairline-2:    #E0E0E4;

  /* --- Elevation --- */
  --sh-card:   0 9px 34px rgba(0, 0, 0, 0.05);
  --sh-card-lg:0 14px 40px rgba(0, 0, 0, 0.08);
  --sh-nav:    0 11px 42px rgba(14, 20, 70, 0.4);
  --sh-mint:   0 9px 45px rgba(6, 214, 160, 0.3);
  --sh-pink:   0 10px 30px rgba(246, 145, 205, 0.35);
  --sh-pop:    0 20px 50px rgba(14, 20, 70, 0.18);

  /* --- Radius --- */
  --r-xs:   8px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 9999px;

  /* --- Type --- */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Spacing --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* --- Layout --- */
  --app-max: 460px;      /* mobile app column */
  --shell-max: 1120px;   /* desktop shell */
  --bottom-nav-h: 74px;
  --tap: 44px;
}